Javascript 集合添加事件在两个独立集合上激发

试图通过添加一些额外功能来了解backbone.js Todos应用程序框架的内部结构，my Todos应用程序会在两个集合（原始TodoList和我自己的UnsavedList）上触发collection.add事件

这就是我所做的：

将“标记全部完成”按钮添加到文档模板，该模板检查所有未选中的复选框，而不将更改保存到服务器

将“保存{unsaved collection length}”按钮添加到文档模板

为了实现这一点，我跟踪TodoList中所有模型的“savedState”

// inside TodoList
hasUnsaved: function() {
  return this.filter(function(todo) {
    var isEqual = _.isEqual(todo.savedAttributes, todo.attributes);
    return !isEqual;
  })
},

声明和实例化未保存列表：

// inside window
window.UnsavedList = Backbone.Collection.extend({

  model: Todo,

  initialize: function() {
      this.bind('add', this.addHandler)
  },

  addHandler: function() {
      alert('added')
  }
});

window.UnsavedTodos = new UnsavedList;

与原始示例一样，add事件绑定到addOne处理程序

// inside AppView
...
initialize: function() {
  Todos.bind('add', this.addOne);
  ...
}

侦听“标记全部完成”按钮单击以调用markAllDone，这反过来会触发“更改：allDone”：

// inside AppView
markAllDone: function() {
    Todos.each(function(todo) {
        todo.set({ done: true });
    })
    Todos.trigger('change:allDone');

},

。。。“change:allDone”调用：

// inside AppView
checkSaved: function() {
    this.$('#todo-controls #button-saved').html(this.buttonSavedTemplate({
        saved: function() {
            var list = Todos.hasUnsaved();
            _.each(list, function(todo) {
                UnsavedTodos.add(todo);
            })
            return list.length;
        }
    }));
},

如果您查看我的模板对象的迭代器，我正在将所有未保存的模型添加到我的未保存列表中。但奇怪的是，TodoList也会在页面上显示所有未保存的模型的副本时监听这个确切的“添加”事件

为什么会这样，即使是我“添加”到“未播放列表”中也很难

---

想法？

尽管我可以使用{silent:true}选项，但我对这种行为太好奇了，我发现自己在查看源代码：

每次将模型添加到集合时，模型本身都会触发add事件。在我的例子中，TodoList和UnsavedList都在收听“add”

下面是从backbone.js截取的代码：

// inside _add
if (!options.silent) model.trigger('add', model, this, options);

为了解决这个问题，我想保持我的事件流，我只存储模型的克隆副本，如下所示：

UnsavedTodos.add(_.clone(todo), { silent: false });

我确信使用嵌套集合或任何处理同一模型而不是克隆的方法来实现这一点要容易得多。我通过事件来跟踪未保存的克隆模型，每次保存、创建或销毁后都会触发这些事件