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，它为Model中的每个Collection呈现ItemView。

您可以在Collection中添加或删除 Models ; 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中为一个地区添加几个视图

1 个答案: