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

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

In this article we will learn concepts of Model in Backbone.js

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

Welcome to Backbone.js article series. In this series we are talking about Backbone.js. In our previous article we have discussed the importance of Backbone.js and various concepts of Model implementation. You can read them 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

http://www.dotnetfunda.com/articles/show/2716/demystify-backbonejs-implement-model-in-backbonejs-part-2

In this article we will learn more about model implementation. We will learn to bind method with property of Mode. The question is “Why the binding is needed”? . If we bind some method with Model property then in change of this property we can trigger any event Or we can get notification about change.

Listen change of Model property

In this article we will bind change method with the name property of Person Model. Now the advantage is that when we will change the name property, the bind trigger will get fire.  Have a look on below example.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<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'
                },
                initialize: function () {
                    this.bind("change:name", function (model) {
                        var name = model.get("name");
                        console.log("Changed original name to:- " + name);
                    });
                }
            });
            var person = new Person({});
            person.set({ name: 'Ajay' });
 
           
        </script>
    </form>
</body>
</html>

Within initialize() block we are binding name property with callback function and outside of Mode we are changing name property. Here is output.


Listen change of any property

In our previous example we have seen to bind any callback function to any property of Model in Backbone.js. Not only any property, but also we can bind the whole Model object to callback function. In this example we are binding whole object to callback function.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<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'
                },
                initialize: function () {
                    this.bind("change", function (model) {
                        var name = model.get("name");
                        var surname = model.get("surname");
                        console.log("Changed original name to:- " + name);
                        console.log("Changed original surname to:- " + surname);
                    });
                }
            });
            var person = new Person({});
            person.set({ name: 'Ajay',surname:'Joshi' });
           
        </script>
    </form>
</body>
</html>

Outside of Model we are creating one object of Model class and then we are setting property of it. So, when we are setting new property in object of Model class the default property value is getting changed. Thus the trigger is getting fire. Here is output of this sample implementation.


Conclusion:-

In this small article we have learned to bind any method to object of Model class or any property of Model class. Hope you have enjoyed it. In coming article we will understand few more concepts about Model implementation 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)