Question

My question most likely requires a very simple answer, which, nevertheless, I was not able to easily find.

A Backbone application I am working on has several views. When defining the different views, I use _.bindAll in the initialize function to connect the “this” view object with the view’s render function. For example:

DiscussedItemView = Backbone.View.extend({
    ...
        initialize: function() {
            _.bindAll(this, "render");
        },


        render: function() {    

            this.$el.attr('id', 'li-meeting-task-' + this.model.getId());

            this.$el.html(JST['tasks_sandbox/agenda_task_item']({ 
                taskName    : this.model.getName(),
                taskId      : this.model.getId()
            }));

            return this;
        },
    ...
});

To create a new instance of the DiscussedItemView, I do the following:

...
        var discussion_agenda_row = new DiscussedItemView({model: task});
        discussion_agenda_row.render();
        this.$( '#meeting-items-list' ).append(discussion_agenda_row.$el); 
...

The code works fine. Still, I do not understand why there is a need for the explicit use of the render() function on discussion_agenda_row. I thought that the initialization of a new DiscussedItemView instance would automatically call the render function, but if I remove the discussion_agenda_row.render(); row, the HTML will not be displayed. Where am I mistaken?

Thank you,
Alexandra

Answer 1

Views respond to changes in the model. In your code, you’re not making a change to the model, so the view is not responding. You also haven’t set the view as a listener to model changes. What you could do in your initialize is something like this:

initialize : function() {
    //this will tell the view to render when the model 
    //triggers a "change" event
    this.model.on("change", this.render, this);

    //this will make the model throw the change event
    //and since the view is listening to "change," render will be invoked.
    this.model.fetch();
}

All that said, if you’re not doing any fetching and the data is just there in your model, you’ll still have to explicitly call view.render(). In any case, for good MVC, I’d still make the view listen to changes in the model so it will properly update itself in response.