Question

我们必须显示以下视图：

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

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

我们需要将产品作为itemView。

我们是否应该将每个类别设为CompositeView，并且具有多个CompositeView？或者是否有任何其他选择将所有复合视图包含在单个项目中，例如：

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

Answer 1

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

在牵线木偶中布局视图的好处是，您可以传递一个模板，该模板应该包含您最初需要的所有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());

这样您就可以使用Region功能显示/关闭您的视图。如果您需要动态添加区域，如果使用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或使用marionette.Renderer对象为您的区域传递一个漂亮的模板。

在动态添加区域没有问题，牵牛花有一种方法可用于该场景。

希望有所帮助，

Answer 2

我建议不要在您的顶级视图中使用Layouts，因为您必须为添加的每个新类别手动创建一个区域。另一方面，使用CollectionView或CompositeView允许无限数量的类别（如果没有，则甚至是空视图），无需额外工作。

是否使用CompositeView或CollectionView作为顶视图的决定取决于您是否需要模板包装器（用于按钮等）。如果你不这样做，那么只需使用CollectionView。

我认为你是在正确的轨道上，每个类别都是一个CompositeView，所以你可以将模板与tbody作为'itemViewContainer'：

<table>
   <tbody>
   </tbody>
</table>

在类别视图中：

itemViewContainer: 'tbody'

然后产品（ItemViews）将使用：

tagName: 'tr'

如何使用同一类型的多个CompositeView构建Marionette？

2 个答案: