为什么 Backbone View 检测不到模型更改？

Question

我有以下 Backbone.js 模型和集合：

// Model 
lr.Event = Backbone.Model.extend({});

// Collection
lr.Events = Backbone.Collection.extend({
  model: lr.Event,
  initialize: function(models, options) {
    this.date = options.date;
  },
  url: function() {
    return '/events' + '?date=' + this.date.toString('yyyy-MM-dd');
  }  
});

与视图及其子视图一起使用：

// View
lr.MapView = Backbone.View.extend({
  el: $('#wrapper'),
  initialize: function() {
    this.date = this.options.date;
    _.bindAll(this, "render", "addAllEvents", "addOneEvent", "showNextDay", "collectData");
    this.collectData();
  },
  events: {
    "click #next": "showNextDay",
  },
  collectData: function() {
    var that = this;
    if (this.collection) this.collection.reset();
    this.collection = new lr.Events([], { date : this.date });
    this.collection.fetch({
      success:  function(resp) {
        that.render();
        that.addAllEvents();
      }
    });      
  },
  showNextDay: function() {
    this.date = this.date.add(1).days();
    this.collectData();
  },
  addAllEvents: function() {
    this.collection.each(this.addOneEvent);
  },
  addOneEvent: function(e) {
    var ev = new lr.EventView({ 
      model:  e,
      parentView: this
    });
  },
  ...
});

// Sub-view
lr.EventView = Backbone.View.extend({
  initialize: function() {
    var that = this;
    this.model.bind('change', function() {
      console.log('foo');
      that.remove();
    });
  }
  ...
});

我正在尝试将子视图绑定到对其关联模型的更改。所以我希望当我调用this.collection.reset() 时，会调用console.log('foo')。但事实并非如此。我之前有console.loged 集合，在我重置它之后，它肯定会从“某事变为无”，所以我假设我以某种方式弄乱了子视图与模型的绑定。

有人看到错误了吗？

Answer 1

在没有模型的情况下调用 reset() 会清空集合，但不会'更改'现有模型。 'change' 事件发生在模型changes 的某些属性时。调用 reset() 确实会触发集合本身的 'reset' 事件（在您获取集合时也会触发）；当它被触发时，你还应该重置你的 UI，创建并渲染所有子视图项(in your case, it looks like you would call render and addAllEvents when you get the reset event)。

this.collection.on('reset', this.removeExistingEventViewsThenAddAllEvents, this);

现在，当 Event 模型的某些属性发生更改时，您将点击您的更改处理程序：

this.model.bind('change', function() {
  console.log('foo');
  that.remove();
});

但是，我真的怀疑您是否想在模型更改时删除事件视图。更有可能的是，您想重新渲染它，或者使用 JQuery 更新它的某些部分。

Answer 2

collection.reset()（backbone.js v0.91，第 609 行）仅在静默删除和可选地重新填充集合后触发 reset 事件。

collection.remove( model(s) );（第 548 行）在每个模型上触发 remove 事件，因此您可以使用 collection.remove( collection.models ); 在每个模型上触发 remove 事件。