在 Backbone.js 中绑定渲染回调

Question

根据 Backbone.js 文档：

每当 UI 操作导致模型的属性发生更改时， 模型触发“改变”事件；显示的所有视图 模型的数据收到该事件的通知，导致它们重新渲染。

所以我认为 render() 方法应该默认绑定到“change”事件。但是，以下代码不起作用：

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();

仅当我添加显式绑定调用时，它才起作用：

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

这是否意味着我对默认 render() 回调的理解不正确，我们应该始终手动绑定 render() 回调？

Answer 1

除非过去几个月发生了什么变化，否则就是这样。这是一件好事，因为它在渲染/重新渲染视图时提供了灵活性（例如，某些应用程序可能希望仅在模型保留在服务器上之后渲染视图，而不一定是在模型更改时才渲染视图）浏览器）。如果您希望视图在模型属性更改时始终重新渲染，您可以使用自己的基本视图来扩展默认主干视图，将其渲染方法绑定到模型更改事件，然后从中扩展所有具体视图。前任：

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'});

Answer 2

使用下面的代码创建新视图后，您可以重新定义 Backbone.View 构造函数以默认设置渲染回调：

Backbone.View = (function(View) {
  // Define the new constructor
  Backbone.View = function(options) {
    // Call the original constructor
    View.apply(this, arguments);
    // Add the render callback
    if (this.model != null) {
      this.model.bind("change", this.render, this);
    } else {
      // Add some warning or throw exception about 
      // the render callback not being triggered
    }
  };
  // Clone static properties
  _.extend(Backbone.View, View);
  // Clone prototype
  Backbone.View.prototype = (function(Prototype) {
    Prototype.prototype = View.prototype;
    return new Prototype;
  })(function() {});
  // Update constructor in prototype
  Backbone.View.prototype.constructor = Backbone.View;
  return Backbone.View;
})(Backbone.View);

现在您可以像这样创建新视图：

view = new Backbone.View({model: new Backbone.Model})