In the previous post we learned about Model Binding in isolation. There are many places where model binding can provide benefit. Where we see model binding the most is in relation to using views. Usually we want the view to depict those changes in the model. In this post we will bind a model to a view.
In the following example the view will be updated when the model changes.
<html >
<head>
<title></title>
<script src="/scripts/jquery-1.8.3.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>
<div id="container-movie"></div>
<script type="text/template" id="template-movie">
Title: <%=title%>;
Rating: <%=mpaaRating%>
</script>
<script type="text/javascript">
var Movie = Backbone.Model.extend({});
var MovieView = Backbone.View.extend({
el: "#container-movie",
template: _.template($("#template-movie").html()),
initialize: function() {
this.model.on("change", this.render);
},
render: function() {
console.log("MovieView render; Movie Title: " + this.model.get("title"));
var htmlOutput = this.template(this.model.toJSON());
this.$el.html(htmlOutput);
return this;
}
})
var movie = new Movie({ title: "The Lion King", mpaaRating: "R" });
var movieView = new MovieView({ model: movie });
movie.set({ title: "Titanic" });
movie.set({ title: "The Godfather" });
</script>
</body>
</html>
In the MovieView initialize function, we bind the view’s render function to the model. The first parameter “change” identifies the event we should bind to. The second argument identifies the function to call when the event is triggered. So in this situation, anytime a change happens to the model, then trigger the render function. Let’s ignore the argument “this” for the time being. I will go over the argument “this” in the following example.
*****************************************************************
In following example, we will describe the use of the argument “this” when binding model to the view. I want to keep it fairly simple so I removed the code that manipulated the DOM.
<script type="text/javascript">
var Movie = Backbone.Model.extend({
type: "Movie"
});
var MovieView = Backbone.View.extend({
el: "#container-movie",
template: _.template($("#template-movie").html()),
type: "MovieView",
initialize: function() {
this.model.on("change", this.render, this);
this.model.on("change", this.render);
},
render: function() {
console.log(this.type);
return this;
}
})
var movie = new Movie({ title: "The Lion King", mpaaRating: "R" });
var movieView = new MovieView({ model: movie });
movie.set({ title: "The Godfather" });
</script>
In both the Movie model and MovieView view I added a property called “type”. The “type” property is hard coded to the kind of object that is created.
In the view’s initialize function we bind the model to the view twice on the change event. When the model is updated, the render function will be called twice. The first statement passes in the argument “this” and the second statement does not have a 3rd argument.
Since we are in the context of the movieView object when we declare the first binding, the argument “this” will reference the movieView object. When the model change event is triggered, the render function will be called and in the render function “this” will reference the movieView object.
In the second binding, “this” is not identified. When the model change event is triggered and the render function is called, the movie object is assigned to “this”. Since the movie object triggered the event, “this” is assigned the movie object”.
I hope this post clarified binding and the use of “this”.
