In this article we will learn events in backbone.js
Demystify Backbone.js: Event in Backbone.js –Part-15
Welcome to “Demystify Backbone.js” article series. In our
previous article we have covered various important concepts of Backbone.js . You
can read them 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
Part:-14
Currently we are talking about event binding of Backbone.js.
In previous two articles we have learned to bind event with object and Model in
Backbone.js.
Bind ‘add’ event to
collection
In this example we will learned to bind “add” event to
collection of Backbone.js . The ‘add’ event will fire when we will try to add
object to collection. Here is sample example to understand the concept.
<%@ 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({
defaults: {
name : '',
surname : '',
}
});
var PersonCollection = Backbone.Collection.extend({
model : PersonModel,
initialize : function () {
this.bind('add',this.newPerson,this);
},
newPerson: function (model) {
console.log('welcome '+ model.get('name'));
},
});
var PersonClass = new PersonCollection();
var p = ({name:'Sourav'});
PersonClass.add(p); //this will trigger add event on our collection
</script>
</form>
</body>
</html>
Output of above example is here.
Unbind ‘add ’ event to collection
This is reverse process of bind() method. Using unbind()
method we can release any previously bind event. In this example at first we
will bind ‘add’ method and then we will unbind it using unbind() function.
<%@ 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({
defaults: {
name : '',
surname : '',
}
});
var PersonCollection = Backbone.Collection.extend({
model : PersonModel,
initialize : function () {
this.bind('add', this.someChange, this);
},
someChange: function (model) {
console.log('New Person Added');
this.unbind('add');
},
});
var PersonClass = new PersonCollection();
var p = ({name:'Sourav'});
PersonClass.add(p); //this will trigger add event on our collection
var p1 = ({ name: 'Ram' });
PersonClass.add(p1); //this will trigger add event on our collection
</script>
</form>
</body>
</html>
The bind() method will fire only for first add() operation.
And then it will unbind. So that we are getting output only for first add()
operation.
Conclusion:-
In this article we have understood to bind ‘add’ event with
collection of Backbone.js. Hope you understood the concept. In next articles, we
will see more examples on event binding in Backbone.js