collections - 如何使用多个同类 CompositeView 构建 Marionette？

Question

我们必须显示以下 View :

类别(显示为表格)，每个类别表格应该有产品(tr)。

我们如何使用 Marionette itemView 和 CompositeView 构建它？

我们需要产品成为一个 itemView。

我们是否应该将每个类别都做成CompositeView，并且有多个CompositeView？或者是否有任何其他替代方法可以将所有 compositeViews 包含到一个项目中，例如:

Collection(CompositeView???)
  -> CompositeView-category1
      -> itemView-product1-1
      -> itemView-product1-2
  -> CompositeView-category2
      -> itemView-product2-1
      -> itemView-product2-2

Answer 1

我建议您使用布局 View ，在此布局中，您可以为每个类别设置一个区域，并在这些区域上绘制复合 View 。

marionette 中 Layout View 的好处是您可以传递一个模板，该模板应包含您最初需要的所有 HTML，例如带有按钮的标题以添加和删除类别等。

CategoriesLayout = Backbone.Marionette.Layout.extend({
   template: "#layout-template",

   regions: {
    category1Region: "#category1",
    category2Region: "#category2"
  }
});;

and then you can render your composite views inside the regions

categoriesLayout = new CategoriesLayout();
categoriesLayout.category1Region.show(new CategoryView());

这样您就可以使用区域功能显示/关闭您的 View 。如果您需要动态添加区域，也可以使用 Marionette.renderer 呈现 HTML，然后将您的区域附加到布局。

此外，您可能想看看 Marionette 的区域管理器，它可以帮助您管理一组区域。

编辑

我做了一个 jsfiddle 来演示这一点，这只是一个例子，但我认为这个想法就在那里......

http://jsfiddle.net/VS9hA/28/

 MyLayout = Backbone.Marionette.Layout.extend({
    template: "#layout-template",

    regions: {
       menu: "#menu",
    }
 });

 var layout = new MyLayout({el:"#container"});
 layout.render();
 var dynamicRegion = sampleModel.get('categoryName');
 layout.addRegion(dynamicRegion,"#dynamic"); // adding the region on the fly
 layout[dynamicRegion].show(sampleView); // using it!

所以在评论中回答你的问题

  categoriesLayout[dynamicRegion].show(new CategoryView())

只需确保 DOM 元素存在(#dynamic)，如果不存在，只需将 HTML 附加到您的布局 View 或使用 marionette.Renderer 对象为您的区域传递一个漂亮的模板。

动态添加区域没有问题，marionette 有一种方法可以应对这种情况。

希望对你有帮助，