Question

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

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

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

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

这会处理集合中模型的添加/删除，但如何管理添加/删除模型的视图添加/删除？

我应该提一下，我在集合视图中使用了this.collection.on（“add”）侦听器。但是这会被添加到每个模型中。我也在单个视图中尝试过this.model.on（“更改”），但是当从集合中添加/删除模型时，不会触发此事。

感谢任何帮助/指导！

更新

我现在正在使用：

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

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

Answer 1

使用reset批量替换更轻松，更高效：

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

一次添加和删除模型一切都很好，但有时您需要更改很多模型，而只是批量更新集合。使用重置将集合替换为新的模型列表（或属性哈希值），最后触发单个"reset"事件。返回新设置的模型。为方便起见，在"reset"事件中，以前任何模型的列表都以options.previousModels的形式提供。

因此，使用'add'并监听'remove'事件，而不是使用set合并更改并生成大量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：

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

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

this.listenTo(this.collection, 'add', ...)：新的模型已添加到集合中，因此请进行渲染。
this.listenTo(this.collection, 'remove', ...)：模型已从集合中删除，因此请删除其部分视图。
this.listenTo(this.collection, 'change', ...)：模型已更改，因此请更新其部分视图。

如果您只使用小型馆藏，那么reset可能会减少工作量。如果您的集合较大或视图更改更昂贵，那么单独处理这三个事件可能是最好的。

在任何情况下，如果您正在使用子视图，您将需要在父视图中的某个位置维护它们的列表，以便您可以在它们上调用remove以确保正确清理所有内容起来。如果您在从集合中删除模型时销毁模型，则可以将子视图绑定到模型的'destroy'事件并根据需要删除它们。

Catalog of Events可能值得一看，看看哪些事件会在什么时候触发。

Backbone：如何在集合更改时更新集合视图？

1 个答案: