集合添加事件在两个独立的集合上触发

Collection add event fires on two independent Collections

本文关键字：集合 独立 两个 事件 添加      更新时间：2023-09-26

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

这就是我所做的：

通过_模板向文档添加"标记全部完成"按钮，该按钮可选中所有未选中的复选框，而不会将更改保存到服务器。

通过_.template.向文档添加"保存（｛未保存的集合长度｝）"按钮

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

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

声明和实例化UnsavedList:

// 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);
  ...
}

点击"Mark All Done"按钮调用markAllDone，进而触发"change: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;
        }
    }));
},

如果您查看我的模板对象的迭代器，我会将所有未保存的模型添加到UnsavedList中。但奇怪的是，TodoList也会监听这个精确的"添加"事件，所有未保存的模型都会在页面上重复显示。

为什么，即使很难，我只是"添加"到UnsavedList。

想法？

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

每次将模型添加到集合中时，模型本身都会触发添加事件。在我的情况下，TodoList和UnsavedList都在监听"添加"

以下是从backbone.js:截取的代码

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

为了绕过这一点（我想我想保持我的事件流），我只存储了一个模型的克隆副本，如下所示：

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

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

这是我完成的修改Todos应用

相关文章：