Question

每当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

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

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

在Backbone.js中绑定渲染回调

2 个答案: