1

这是一个 5 部分的主干.js hello world 教程/应用程序。https://web.archive.org/web/20180317062059/http://arturadib.com/hello-backbonejs/docs/3.html在第 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);

有人可以解释一下该代码是如何工作的。我查看了文档，但找不到以这种方式使用的绑定的解释。

完整代码

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

1 回答 1

3

假设您的收藏已经有 10 个模型。然后你将它传递给你的视图。你会调用render()which 触发循环appendItem()或不触发循环。你的观点很愉快。

然后将模型添加到您的集合中。（型号 11）

与其重新渲染整个事物，不如this.collection.on('add', this.appendItem, this)执行将单个项目视图添加到已经存在的视图列表的函数。

这可能就是它绑定到 add 事件并作为循环包含在渲染中的原因。一个循环遍历现有集合以在开始时生成视图。一个人负责在第一次初始化和渲染视图之后添加的任何新模型。

于 2012-09-20T18:59:06.340 回答