Обновить вид элементов из Магистральной коллекции добавить

Question

У меня есть ListView и ItemView. ListCollection используется как коллекция для ListView. Теперь, если я получу дополнительную новую коллекцию (например, большее количество элементов в списке) и add() в ListCollection, как мне пойти , делая список в целом после add событий?

1. Должно ли я делать collection.add(newCollection)? А затем прокрутите newCollection, чтобы добавить модель по модели, пока она не сработала ItemView, чтобы привязать ее к событию add модели для рендеринга?

2. Или нужно пропустить каждую модель в newCollection, чтобы создать новую модель, а затем добавить в ListCollection? Каждый цикл с вызовом ItemView.render()

То, что я не хочу, чтобы сделать это повторно вынести весь ListView, который является слишком неэффективно.

Дайте мне знать, если есть хороший вариант между этими двумя или третьим.

Answer 1

Я понял, используя LayoutManager и поместить это событие связывания звонок addOne от initialize

this.collection.on("add", this.addOne, this); 

addOne функция будет в основном использовать insertView из LayoutManager

this.insertView(new ItemView({model: model})).render(); 

Это просто.

Answer 2

Лучший способ справиться с этим состоит в том, чтобы ваш процесс добавления вида элемента для отдельной модели, не зависящей от коллекции. Затем вы можете вызывать одну и ту же функцию из вашего первоначального рендера, когда цикл и из события «добавить».

ItemView = Backbone.View.extend({ 
    // ... 
}); 

ListView = Backbone.View.Extend({ 

    initialize: function(){ 
    this.collection.on("add", this.addItemView, this); 
    }, 

    addItemView: function(item){ 
    var view = new ItemView({ 
     model: item 
    }); 
    view.render(); 

    this.$el.append(view.$el); 
    }, 

    render: function(){ 
    this.collection.each(this.addItemView); 
    } 

}); 

FWIW, MarionetteJS обрабатывает все это для вас:

ItemView = Marionette.ItemView.extend({ 
    template: "#some-template" 
}); 

CollectionView = Marionette.CollectionView.extend({ 
    itemView: ItemView 
}); 

var cv = new CollectionView({ 
    collection: someCollection 
}); 

cv.render(); 

Вы можете найти более подробную информацию о марионеток на http://marionettejs.com