Re-Learning Backbone.js – Model Binding Events

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.


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.

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.

 

3 thoughts on “Re-Learning Backbone.js – Model Binding Events”

Leave a Reply

Your email address will not be published. Required fields are marked *