Usually a view tracks a model, and when the data in the model changes the view is updated to represent the changes. In the previous two blog posts we learned about Bakbone.js Views, but our views did not track models and were not update when the model changed.
In this post we will learn the basics about binding models events. I do not want to overly complicate the situation, so we are going to learn about Backbone.js Model Binding Events in isolation. We will not be using views in these examples, but the knowledge we do gain here will be applied in the next blog post about views monitoring changes in models
In this example whenever the model’s data changes, the function movieChanged will be called.
<html >
<head>
<title></title>
<script src="/scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/scripts/underscore.js" type="text/javascript"></script>
<script src="/scripts/backbone.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var Movie = Backbone.Model.extend({
initialize: function () {
console.log("Movie initialize");
}
});
var movieChanged = function (event) {
console.log("Movie changed - " + event.get("title"));
}
var movie = new Movie({ title: "Lion King", mpaaRating: "R" });
movie.on("change", movieChanged);
movie.set({ title: "The 12 Monkeys" });
movie.set({ title: "Lion King" });
</script>
</body>
</html>
In the example above we created the standard Backbone Model called Movie.
Next we create a standard function call movieChanged. There not much special here. This function does accept an argument call event. We will see later that the value of the event argument is the actual model that fired the event.
We then instantiate the Movie class to an object call movie. This object has two properties, title and mpaaRating.
Now for the core part of this example. Whenever a change occurs on the movie object, call movieChanged function. For the “movie” object, we call the “on” function and pass in the event (“change”) that we want to be notified about and what function to call when the event is triggered.
Next, we change the movie title twice.
As we can see, when the movie title is changed the function movieChanged gets called. It’s import to remember that the argument that movieChanged accepted was the movie model that triggred the event.
****************************************************************
In this example, I want to show you that we track specific properties for the model. In the
following example anytime the mpaaRating is change we want to be notified about it.
<script type="text/javascript">
var Movie = Backbone.Model.extend({
initialize: function () {
console.log("Movie initialize");
}
});
var movieChanged = function (event) {
console.log("Movie changed - " + event.get("mpaaRating"));
}
var movie = new Movie({ title: "Lion King", mpaaRating: "R" });
movie.on("change:mpaaRating", movieChanged);
movie.set({ title: "The 12 Monkeys" });
movie.set({ title: "Lion King" });
movie.set({ mpaaRating: "PG" });
</script>
Now we set the event to “change:mpaaRating”. This identifies that when the property mpaaRating changes, then call movieChanged function.
We change the title for the move, but since an event is not wired up for change or for the title, the movieChanged event will not be fired.
On the last line we change the mpaaRating, which triggers movieChaged function.
This was a brief overview of the binding model events.
BarDev - Archive 
!!! Excellent!
Really Awesome tutorial…
Good and Simple! Thank you