Backbone.js 主干：收集事件绑定器

这是一个由5部分组成的backbone.js hello world教程/应用程序。在第3部分中，作者演示了如何使用集合和模型存储数据，以及如何将更改与视图联系起来

大部分我都懂，除了这一行

this.collection.bind('add', this.appendItem); // collection event binder

这个“绑定”只是绑定上下文，还是作为一个“事件”起作用，比如在添加模型后随时调用appendItem

我问，因为在ListView的render方法中，它显式地调用appendItem方法，所以为什么它要绑定到“add”

_(this.collection.models).each(function(item){ // in case collection is not empty
    self.appendItem(item);
  }, this);

有人能解释一下代码是如何工作的吗。我查阅了文档，但找不到以这种方式使用bind的解释

完整代码

(function($){
¶
Item class: The atomic part of our Model. A model is basically a Javascript object, i.e. key-value pairs, with some helper functions to handle event triggering, persistence, etc.

  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });      

¶
List class: A collection of Items. Basically an array of Model objects with some helper functions.

  var List = Backbone.Collection.extend({
    model: Item
  });

  var ListView = Backbone.View.extend({
    el: $('body'),
    events: {
      'click button#add': 'addItem'
    },
¶
initialize() now instantiates a Collection, and binds its add event to own method appendItem. (Recall that Backbone doesn't offer a separate Controller for bindings...).

    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

      this.collection = new List();
      this.collection.bind('add', this.appendItem); // collection event binder

      this.counter = 0;
      this.render();      
    },
    render: function(){
¶
Save reference to this so it can be accessed from within the scope of the callback below

      var self = this;      
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){ // in case collection is not empty
        self.appendItem(item);
      }, this);
    },
¶
addItem() now deals solely with models/collections. View updates are delegated to the add event listener appendItem() below.

    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter // modify item defaults
      });
      this.collection.add(item); // add item to collection; view is updated via event 'add'
    },
¶
appendItem() is triggered by the collection event add, and handles the visual update.

    appendItem: function(item){
      $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
    }
  });

  var listView = new ListView();
})(jQuery);

（函数（$）{
¶
Item类：我们模型的原子部分。模型基本上是一个Javascript对象，即键值对，带有一些帮助函数来处理事件触发、持久性等。
var Item=Backbone.Model.extend({
默认值：{
第一部分：你好，
第二部分：“世界”
}
});      
¶
列表类：一个项目集合。基本上是一个带有一些辅助函数的模型对象数组。
var List=Backbone.Collection.extend({
型号：项目
});
var ListView=Backbone.View.extend({
el:$（“正文”），
活动：{
'单击按钮#添加'：'添加项'
},
¶
initialize（）现在实例化一个集合，并将其add事件绑定到自己的方法appendItem。（回想一下，主干网并没有为绑定提供单独的控制器…）。
初始化：函数（）{
_.bindAll（this，'render'，'addItem'，'appendItem'）；//记住：使用'this'作为当前对象的每个函数都应该在这里
this.collection=新列表（）；
this.collection.bind（'add'，this.appendItem）；//集合事件绑定器
这个计数器=0；
这个。render（）；
},
render:function（）{
¶
保存对此的引用，以便可以在下面的回调范围内访问它
var self=这个；
$（this.el）.append（“添加列表项”）；
$（this.el）。追加（“
”）；
_（this.collection.models）。如果集合不是空的，则每个（函数（项）{//
自附项（项）；
}，这个）；
},
¶
addItem（）现在只处理模型/集合。视图更新委托给下面的add event listener appendItem（）。
附加项：函数（）{
这个.counter++；
var item=新项（）；
item.set({
part2:item.get（'part2'）+this.counter//modify item defaults
});
this.collection.add（item）；//将项添加到集合；视图通过事件“add”更新
},
¶
appendItem（）由集合事件add触发，并处理可视化更新。
附录项：功能（项）{
$（'ul'，this.el）.append（
“+item.get（'part1'）+”+item.get（'part2'）+”
）；
}
});
var listView=new listView（）；
})（jQuery）；

假设您的系列已经有10个型号。然后你把它传递给你的视图。您可以调用

render（）

，这会触发

appendItem（）的循环。你的观点很乐观

然后将模型添加到集合中。（模式11）

this.collection.on（'add'，this.appendItem，this）
执行将单个项目视图添加到现有视图列表的函数，而不是重新呈现整个内容

这可能就是它绑定到add事件并作为循环包含在渲染中的原因。一个循环遍历现有集合以在开始时生成视图。第一次初始化并渲染视图后，用户需要处理添加的任何新模型。
将一些事情结合起来，使教程最新：1。使用
this.$el
代替
$（this.el）
2
\（this.collection.models）。每个（…）
应该是
this.collection.each（…）
3
$（'ul'，this.el）
应该是
this.$（'ul'）
。有关详细信息，请参阅。好的，非常感谢您的解释。但是，如果可能的话，您能解释一下为什么在相同视图中设置的事件：{}中没有处理该功能吗？在events中这样做似乎是合乎逻辑的。视图中的events散列是针对DOM事件的。主干使用
delegateEvents（）
（jQuery的
delegate（）
函数）将DOM元素上的DOM事件（单击、聚焦、悬停等）附加到视图对象中的处理程序。当您执行
this.model.on
或
this.collection.on
时，您使用的是主干.Events模块，该模块适用于跨非DOM对象（如模型和集合）处理事件。您可以使用Backbone.Events并使任何对象都能够绑定和触发自定义事件a-la Backbone style.Sure。一定要检查这些，以了解细节，