Demystify Backbone.js: Implement Model in Backbone.js –Part-1

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 7261 red flag

In this article we will learn about Backbone.js with practical example

Demystify Backbone.js: Implement Model in Backbone.js –Part-1

This is “Demystify Backbone.js” article series. In this series we will be learning the concept of Backbone.js and various components of it. In our previous article we have discussed why JavaScript plays vital role in web application and the basic concept of Backbone.js. You can read our previous article here.

http://www.dotnetfunda.com/articles/show/2712/demystify-backbonejs-introduction-to-backbonejs

In this article we will learn the implementation of Model in Backbone.js. To implement Backbone.js we have to download the Backbone.js library and Backbone.js is dependent on JQuery. So, we have to use JQuery library when we want to use Backbone.js and point to be noted “Always include JQuery library before Backbone.js library, otherwise it will not work”.

So, this is all about environment setting and we will implement Model in Backbone.js. As per discussion in earlier article, Model is very similar to class in any object oriented programming language.

Implement Model in Backbone.js

In this example we will implement Model with few properties. Have a look on below code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="backbone/Jquery.js"></script>
    <script type="text/javascript" src="backbone/underscore-min.js"></script>
    <script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <script>
            var Person = Backbone.Model.extend({
defaults:{
                        name: 'Sourav',
surname: 'Kayal'
}
            });
        </script>
    </form>
</body>
</html>

We have declared Person Model and has set two properties called “name” and “surname”.  We have set those properties within “defaults” section which is very similar to constructor in object oriented programming language. So, when we create any object of Person class then the default value will get set in name and surname property.


Access property of Model class

In our previous example we have learned very simple implement of Model class. Now we will learn to access property of Model class. In this example we have set Model class property with default value.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 
    <script type="text/javascript" src="backbone/Jquery.js"></script>
    <script type="text/javascript" src="backbone/underscore-min.js"></script>
    <script type="text/javascript" src="backbone/backbone-min.js"></script>
   
</head>
<body>
    <form id="form1" runat="server">
        <script>
            var Person = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
           
            var p = new Person({});
            console.log("Name:- " + p.get('name'));
            console.log("Surname:- " + p.get('surname'));
 
        </script>
    </form>
</body>
</html>

To access Model class at first we have to create object of Model class and then using “get()” function we can get the value of particular property.

Here is sample output.


Create model class on fly

In our previous example we have learned to implement strong type class. It means the properties of those classes are pre defined. But in Backbone.js we can implement loosely type class , means we can set property of class on fly.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 
    <script type="text/javascript" src="backbone/Jquery.js"></script>
    <script type="text/javascript" src="backbone/underscore-min.js"></script>
    <script type="text/javascript" src="backbone/backbone-min.js"></script>
   
</head>
<body>
    <form id="form1" runat="server">
        <script>
            var Person = Backbone.Model.extend({
            });
           
            var p = new Person({name:'Sourav',surname:'Kayal'});
            console.log("On fly Name:- " +p.get('name'));
            console.log("On fly Surname:- " + p.get('surname'));
 
        </script>
    </form>
</body>
</html>

In this example at first we are creating one empty class and then we are setting class property in time of object creation. Here we are setting name and surname property to “p” object of “Person” class. Here is sample output of this example.


Set various property on same Model on fly

In our previous example we have learned to set property in runtime. Now the concept is,”We can set different property of same Model” in run time. Here is sample implementation.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 
    <script type="text/javascript" src="backbone/Jquery.js"></script>
    <script type="text/javascript" src="backbone/underscore-min.js"></script>
    <script type="text/javascript" src="backbone/backbone-min.js"></script>
   
</head>
<body>
    <form id="form1" runat="server">
        <script>
            var multi = Backbone.Model.extend({
            });
           
            var p = new multi({ name: 'Sourav', surname: 'Kayal' });
            var book = new multi({ bookname: 'BackboneJS', author: 'Someone' });
 
            console.log("On fly Name:- " +p.get('name'));
            console.log("On fly Surname:- " + p.get('surname'));
 
            console.log("On fly BookName:- " + book.get('bookname'));
            console.log("On fly Author:- " +book.get('author'));
 
 
 
        </script>
    </form>
</body>
</html>

In this example we have created “multi” Model and in first object of this Model we have set “name” and “surname” property and in second model we have set “bookname” and “author” property into it. Here is sample example.


Conclusion:-

This is the first part of Model discussion. In coming articles we will understand more about Model with examples. Hope you have understood it. 

 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)