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.