Demystify Backbone.js: Event in Backbone.js –Part-14

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 2883 red flag
Rating: 4 out of 5  
 1 vote(s)

In this article we will learn events in backbone.js

Demystify Backbone.js: Event in Backbone.js –Part-14

This is “Demystify Backbone.js” article series.  In this series we are learning various concepts of Backbone.js. In our previous article we have seen the concepts of Model , View and collection. You can read the previous articles here.

 Part-1

Part-2

Part-3

Part-4

Part-5

part -6

Part:-7

Part:-8

Part:-9

Part:10

Part:-11

Part:-12

Part:-13

In our previous article we have learned to bind event in JavaScript object and Model of Backbone.js. In this article we will learn few more example of event binding in Backbone.js.

Detect changed in Model and get changed data

By binding “change” event with Model class we can detect the change of Model and the data which has changed. In this example we have created “PersonModel” and bind ‘change’ event associated with it.

<%@ 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 PersonModel = Backbone.Model.extend({
 
               initialize: function () {
                   this.bind('change' , this.someChange , this); //when some property in this object has changed, run this.someChange() function
               },
               someChange: function(model , options){
                  
                   console.log('How many property has changed:- ' + model.changedAttributes.length);
                   console.log('Changed Value:- '  + model.get('Name'));
 
               },
               defaults: {
                   Name : 'Sourav',
                   Surname : 'Kayal',
               }
           });
           var p = new PersonModel();
           p.set({'Name':'Manish'});
          
        </script>
    </form>
</body>
</html>

There is some default value which will initialize in time of object creation of Model. After that if we try to change the default value then the change event will get fire. Within change event we are getting the changed value of this object.

Here is sample output of above example.


Bind change event to a certain property of Model

In our previous example we had bind ‘change’ event with entire mode. If we want, we can bind ‘change’ event with certain property. In this example we will bind ‘change’ event only with Name property. When we will try to change only name property then the change event will fire. 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>
           var PersonModel = Backbone.Model.extend({
 
               initialize: function () {
                   this.bind('change:Name', this.someChange, this); //when some property in this object has changed, run this.someChange() function
               },
               someChange: function(model , options){
                   console.log('New name is :- '  + model.get('Name'));
               },
               defaults: {
                   Name : 'Sourav',
                   Surname : 'Kayal',
               }
           });
           var p = new PersonModel();
           p.set({'Name':'Manish'});
          
        </script>
    </form>
</body>
</html>

 


Conclusion:-

In this article we have seen to get changed value from ‘change’ event and how to bind ‘change’ event with certain property of Model class. In next articles we will learn few more concepts of event binding.


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)