javascript - Backbone : How to update a collection view when collection changes?

Question

我对 Backbone.js 比较陌生。我正在初始化一个 Collection View 并在创建时传入一个集合。

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

然后我渲染 Collection View 。每次用户在文本框中输入查询时，都会重新生成集合并使用以下方法将其分配给 Collection View :

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

这负责在集合中添加/删除模型，但我如何管理添加/删除添加/删除模型的 View ？

我应该提一下，我在 Collection View 中使用了 this.collection.on("add") 监听器。但这会为添加的每个模型触发。我还从单个 View 中尝试了 this.model.on("change")，但是当从集合中添加/删除模型时，这不会被触发。

感谢任何帮助/指导!

更新

我现在正在使用:

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

当重置事件被触发时，我将删除建议 subview ，为新集合重新初始化它们并重新呈现 Collection View 。

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 = [];
}

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

Answer 1

使用 reset 可以更轻松、更高效地进行批量替换:

reset collection.reset([models], [options])

Adding and removing models one at a time is all well and good, but sometimes you have so many models to change that you'd rather just update the collection in bulk. Use reset to replace a collection with a new list of models (or attribute hashes), triggering a single "reset" event at the end. Returns the newly-set models. For convenience, within a "reset" event, the list of any previous models is available as options.previousModels.

所以不用 set合并更改并生成一堆 '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' 事件(分别) 从他们;集合也可以触发 'change' 事件，因为它们 forward all the events from their enclosed models :

Any event that is triggered on a model in a collection will also be triggered on the collection directly, for convenience.

因此，如果您想使用 Collection#set，那么您需要在 View 中使用三个处理程序:

1. this.listenTo(this.collection, 'add', ...):一个新模型已添加到集合中，因此需要渲染它。
2. this.listenTo(this.collection, 'remove', ...):模型已从集合中移除，因此移除它在 View 中的部分。
3. this.listenTo(this.collection, 'change', ...):模型已更改，因此更新它的 View 部分。

如果您只处理小型集合，那么 reset 可能不太有效。如果您的集合更大或 View 更改更昂贵，那么最好分别处理这三个事件。

无论如何，如果您正在使用 subview ，您将希望在父 View 中的某处维护它们的列表，以便您可以调用 remove在他们身上，以确保事情得到妥善清理。如果您在从集合中删除模型时要销毁它们，您可以让 subview 绑定(bind)到它们模型的 'destroy' 事件并根据需要自行删除。

Catalog of Events可能值得回顾一下，看看什么时候触发了什么事件。