Question

According to Backbone.js documentation:

Whenever a UI action causes an attribute of a model to change, the
model triggers a “change” event; all the Views that display the
model’s data are notified of the event, causing them to re-render.

So I suppose that render() method should be bound to “change” event by default. However the following code does not work:

TestModel = Backbone.Model.extend({});
TestView  = Backbone.View.extend({
    render: function() {
        alert('render called');
    }
});
var mod  = new TestModel;
var view = new TestView({model:mod});
mod.change();

It works only if I add explicit bind call:

initialize: function() {
    this.model.bind('change', this.render, this);
}

Does this mean that my understanding of default render() callback is not correct and we should always bind render() callback by hand?

Answer 1

Unless something has changed in the last few months, yes, that is the case. This is a good thing, as it gives flexibility as to when views are rendered/re-rendered (for example, some applications might want to render a view only after a model has been persisted on the server, not necessarily when it changes in the browser). If you want your views to always re-render when a model attribute changes, you can extend the default backbone view with your own base view that binds its render method to the model change event, then extend all your concrete views from that. Ex:

MyView = Backbone.View.extend({
    initialize: function() {
        Backbone.View.prototype.initialize.apply(this, arguments);
        this.model.bind('change', this.render);
    }
});

MyConcreteView = MyView.extend({...});
var model = new Backbone.Model({...});
var view = new MyConcreteView({model: model});
model.set({prop: 'value'});