In this article we will learn events in backbone.js
Demystify Backbone.js: Event in Backbone.js –Part-13
Welcome to Demystify Backbone.js article series. In this
series we are learning various concepts of Backbone.js. We have learned about
Model , View and collection in our previous articles. You can read the complete
series 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
In this article we will learn to bind any event to any
object. The event binding is very useful when we want to monitor some object.
For example, we want to track the change of some object and
when change will occur ,we will fire one event to do some other task.
Bind alert event to
object
This is the first example of event binding to object. Here
we will bind alert event to some object and then we will trigger the alert
event. Here is sample code 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>
var object = {};
_.extend(object, Backbone.Events);
object.bind("alert", function (msg) {
alert("Triggered " + msg);
});
object.trigger("alert", "Alert Event Trigger");
</script>
</form>
</body>
</html>
We are using trigger() method to trigger alert event which
we have bind with “object”. Here is output of above code.
Bind custom event to object
In the previous example we have seen to bind alert event to
object, the alert event is predefined. We are allowed to bind our custom event
to object. Here is example to bind custom event to object.
<%@ 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 object = {};
_.extend(object, Backbone.Events);
object.bind("poke", function () {
console.log("Ouch, you just poke me");
});
object.bind("kick", function () {
console.log("Ouch, you just kick me");
});
object.trigger("poke");
object.trigger("kick");
</script>
</form>
</body>
</html>
In this example we have bind “poke” and “kick” event to
“object”. Both are custom event which we have defined by us. At last we are
using trigger() function to trigger both event. This is the output of above
example.
Bind change event to Model class
In this example we will see how to bind change event to
Model class in Backbone.js. The change
event will fire when we will try to change model data.
<%@ 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('something has changed');
},
defaults: {
Name : 'Sourav',
Surname : 'Kayal',
}
});
var p = new PersonModel();
p.set({'Name':'new name'});
</script>
</form>
</body>
</html>
We are passing current model to change callback function and
if needed we can track changed data within change callback function.
Conclusion:-
In this article we have learned to bind event with
JavaScript object and Model of Backbone.js. In coming articles in this series we
will understand few more concepts of event binding in Backbone.js.