Javascript 主干：如何在集合更改时更新集合视图？

我对Backbone.js比较陌生。我正在初始化集合视图，并在创建时传入集合

suggestionsView = new TreeCategoriesAutoSuggest.Views.Suggestions({
    collection: new App.Collections.Suggestions(this.getSuggestions(query))
});

然后渲染集合视图。每次用户在文本框中输入查询时，将使用以下命令重新生成集合并将其分配给集合视图：

suggestionsView.collection.set(this.getSuggestions(query));

这将负责在集合中添加/删除模型，但如何管理添加/删除模型的视图的添加/删除

我应该提到，我在collection视图中使用了this.collection.on（“add”）侦听器。但对于添加的每个模型，都会触发此操作。我还尝试了在单个视图中使用这个.model.on（“change”），但在从集合中添加/删除模型时不会触发该命令

感谢您的帮助/指导

更新

我现在使用：

suggestionsView.collection.reset(this.getSuggestions(query));

当触发重置事件时，我将删除建议子视图，为新集合重新初始化它们，并重新呈现集合视图

handleReset: function(){
    console.log("reset");
    this.cleanupOldViews();
    this.initViews();
},

initViews: function(){
    this.collection.each(function(suggestion){
        this.suggestionViews.push(new TreeCategoriesAutoSuggest.Views.Suggestion({
            model: suggestion
        }));
    },this);        
},

cleanupOldViews: function(){
    _.each(this.suggestionViews,function(suggestionView){
        suggestionView.remove()
    },this);

    this.suggestionViews = [];
}

---

所以你认为我不需要担心破坏模型吗？

批量更换更容易，更有效，使用：

重置

集合。重置（[型号]，[选项]）

一次添加和删除一个模型是很好的，但有时您有太多的模型需要更改，所以您宁愿批量更新集合。使用reset将集合替换为新的模型列表（或属性散列），在末尾触发单个

“reset”

事件。返回新设置的模型。为方便起见，在

“reset”

事件中，任何先前型号的列表都可作为

选项使用。先前型号

因此，与其使用合并更改并生成一组

'add'

和

'remove'

事件，不如使用

reset

并侦听

'reset'

事件：

// In the view's `initialize`...
this.listenTo(this.collection, 'reset', this.render);

然后，

render

可以重新绘制整个内容，您会说：

suggestionsView.collection.reset(this.getSuggestions(query))
// ------------------------^^

刷新东西

---

评论中的一些澄清：模型不会生成

'add'

事件，只有集合触发这些事件。模型在其属性更改时触发

'change'

事件，集合在模型（分别）被添加和移除时触发

'add'

和

'remove'

事件；集合还可以触发

“更改”

事件，因为它们：

为方便起见，在集合中的模型上触发的任何事件也将直接在集合上触发

因此，如果要使用

Collection#set

，则视图中需要三个处理程序：

this.listeno（this.collection，'add'，…）

：已将新模型添加到集合中，因此请渲染它

this.listeno（this.collection，'remove'，…）

：模型已从集合中删除，因此请删除其视图的一部分

this.listeno（this.collection，'change'，…）

：模型已更改，因此请更新其视图部分

如果您只处理小集合，则

reset

可能会减少工作量。如果您的集合更大或视图更改更昂贵，则最好分别处理这三个事件

在任何情况下，如果您使用的是子视图，您都需要在父视图中的某个位置维护它们的列表，以便可以调用它们以确保正确地清理了内容。如果在从集合中删除模型时正在销毁模型，则可以将子视图绑定到其模型的

'destroy'

事件，并根据需要删除它们自己

---

可能值得回顾一下，看看哪些事件在哪些时间触发。

但是重新呈现整个列表不是一个坏主意吗？就我而言，我的系列中没有那么多型号。重置是否会从内存中删除相应的视图？取决于视图。跟踪子视图并对其调用

remove

，通常是一个好主意。我以为你不想处理一堆个人的

'add'

和

'remove'

事件，我误解了吗？不，你没有误解。也许我不清楚。当我在集合中侦听“add”事件时，会为每个模型调用回调。但是，在模型上侦听“add”事件时，不会发生任何事情。在主干集合中，集合有：（model=toAdd[i]）.trigger（'add'，model，this，options）；这让我觉得它会在模型上触发，因此这就是我应该听的地方。模型不会触发

'add'

事件，因为没有向模型添加任何内容（在主干意义上），所以集合会触发

'add'

事件。我已经在上面添加了一些澄清。谢谢！我的大脑被炸了，这当然有道理！我将跟踪子视图，并在需要时删除它们。重置似乎更好，但是我看不到单个模型上触发的破坏事件，所以我是否正确地假设它们没有被删除？模型数组只需重置为[]。