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

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

In this article we will discuss about Model in Backbone.js

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

This is Backbone.js article series. In our previous articles we have discussed the importance of JavaScript and components of Model in Backbone.js.  You can read them from here.

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

·         http://www.dotnetfunda.com/articles/show/2713/demystify-backbonejs-implement-model-in-backbonejs-part-1

 

In this article we will learn more about Model implementation in Backbone.js.

Set Model property using set() method

We can set property of Model using set() method. In this example we are creation on empty Model and them

<%@ 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>
            Person = Backbone.Model.extend({
            });
            var person = new Person();
            person.set({ name: "Sourav",surname: "Kayal" });
            console.log(person.get('name'));
            console.log(person.get('surname'));
 
        </script>
    </form>
</body>
</html>

setting model property. The properties are name and surname. Then we are accessing them using get() method. Here is sample output of example.


Define function within model

In our previous article we have seen to set property in Model, but as Model is very similar to class so it can contain function too. In this example we will set function as member of the Model. 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>
            Person = Backbone.Model.extend({
                myfunction:function(){
                    console.log('I am function within Person Model');
                }
            });
            var p = new Person();
            p.myfunction();
           
 
        </script>
    </form>
</body>
</html>

The “myfunction” property containing one anonymous function ,which we are calling with object of Person class.


Print Model property within function

In our previous example we have learn to set function in Model. In this example we will access Model property within function. Have a look on below example.

<%@ 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>
            Person = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname:'Kayal'
                },
                Print: function () {
                    console.log('Name is:- ' + this.defaults.name);
                    console.log('Surname is:- ' + this.defaults.surname);
                }
               
            });
            var person = new Person();
            person.Print();
           
        </script>
    </form>
</body>
</html>

We are printing the property of Model using “this” operator. This is sample output.


Show Model data as JSON format

Model in Backbone.js containing toJSON() function which will help to convert Model data to JSON format directly.

<%@ 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>
            Person = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname:'Kayal'
                },
            });
            var person = new Person();
            console.log(person.toJSON());
           
        </script>
    </form>
</body>
</html>


Conclusion:-

In this article we have learned many concepts of Model in Backbone.js. In coming article we will understand few more concept of Model in Backbone.js


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)