Элегантный способ добавления нескольких видов в регион в Marionette

Question

Есть ли более элегантный способ, чем тот, который приведен ниже, чтобы добавить другой вид в регион? Я бы хотел добавить столько окон чата, когда нажимается кнопка, и уничтожать ее, когда нажимается кнопка в окне чата.

Один ниже требует, чтобы следить за индексом для каждого элемента:

var AppLayoutView = Backbone.Marionette.LayoutView.extend({ 
    template: "#layout-view-template", 

    regions: { 
     wrapperChat : '#wrapper-chat' 
    } 
    appendView: function (incremennt, newView){ 
    this.$el.append('<div id="view'+increment+'" >') ; 
    this.regionManager.addRegion('view'+increment , '#view'+increment) 
    this['view'+increment].show (newView) ; 
    } 
}); 

// ChatView 
var ChatView = Marionette.ItemView.extend({ 
    template: "#chat-template" 
}); 

// Layout 
var LayoutView = new AppLayoutView(); 
LayoutView.render(); 

// Append View 
LayoutView.wrapper.appendView(++index, new ChatView()); 

Answer 1

Регионы предназначены, чтобы показать один вид. Абстракция Marionette для повторных просмотров - CollectionView, которая отображает ItemView для каждого Model в Collection.

Вы добавляете или удаляете Модели из коллекции; Marionette обрабатывает обновления для вас.

Если у вашего ChatView уже есть модель, используйте это. Если нет, вы можете добавить тривиальную модель для абстрагирования переменной index.

// Collection for the Chat models. 
// If you already have Chat Collection/Models, use that. 
// If not, create a simple Collection and Models to hold view state, e.g.: 
var chats = new Backbone.Collection(); 

// CollectionView "subclass" 
var ChatCollectionView = Marionette.CollectionView.extend({ 
    itemView: ChatView 
}) 

// Add a single ChatCollectionView to your region 
var chatsView = new ChatCollectionView({ collection: chats }); 
LayoutView.getRegion('wrapperChat').show(); 

// To add a ChatView, add a Model to the Collection 
var nextChatId = 0; 
chart.addChat(new Backbone.Model({ id: nextChatId++ })); 

// To remove a chat, remove its model 
chart.remove(0);