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.