Магистраль: как обновить представление коллекции при изменении коллекции?

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,

Так что вместо использования 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' события, потому что они пересылают все события из своих вложенных моделей:

Любое событие, которое вызывается на модели в коллекции, также будет инициировано непосредственно в коллекции для удобства.

Так что если вы хотите использовать Collection#set тогда вам понадобятся три обработчика:

1. this.listenTo(this.collection, 'add', ...): Новая модель была добавлена ​​в коллекцию, так что визуализируйте ее.
2. this.listenTo(this.collection, 'remove', ...): Модель была удалена из коллекции, поэтому удалите ее часть вида.
3. this.listenTo(this.collection, 'change', ...): Модель изменилась, поэтому обновите свою часть представления.

Если вы работаете только с небольшими коллекциями, то reset может быть меньше работы. Если ваши коллекции больше или изменения в представлении стоят дороже, то лучше всего работать с тремя событиями по отдельности.

В любом случае, если вы используете вложенные представления, вам нужно сохранить их список где-нибудь в родительском представлении, чтобы вы могли вызывать remove на них, чтобы убедиться, что вещи должным образом убраны. Если вы удаляете модели при удалении их из коллекции, вы можете связать вложенные представления с их моделями. 'destroy' события и удалить себя по мере необходимости.

Каталог событий может стоить пересмотреть, чтобы увидеть, какие события запускаются в какое время.