将多个视图附加到 Marionette 中的区域的优雅方式

Question

有没有比下面的方法更优雅的方法来将另一个视图附加到区域？我想在单击按钮时附加尽可能多的聊天 windows，并在单击聊天 window 中的按钮时销毁它。

下面的需要跟踪每个元素的索引：

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, which renders an ItemView for each Model in a Collection。

您在 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);

将多个视图附加到 Marionette 中的区域的优雅方式

Elegant way to append several views to a region in Marionette

javascript

view

backbone.js

marionette