编辑：

Question

我有一个带有模板的CompositeView，带有模板的ItemView。行！

但是现在我想把两个itemView包装成一个相同的div，即

第一个ItemView，第二个ItemView变成了一个第三个ItemView，第四个itemView到其他......等等

我知道我可以在ItemView的模板中使用ItemIndex ..但我不知道在Composite View的模板中使用此值

我有：

Pagination.ItemView = Marionette.ItemView.extend({
    template: PaginationItemView,
});

Pagination.ItemsListView = Backbone.Marionette.CompositeView.extend({

        itemViewContainer: 'span',
        itemView: Pagination.ItemView,

         itemViewOptions: function(model, index) {
          return {
            itemIndex: index
          }
        }
    });

我的ItemView模板是：

    <script>
    <div style="margin-bottom:25px;height: 47%;" class="col-lg-6 col-xs-12 clearfix">
        <div class="col-xs-3">
            <!-- photo >
        </div>
        <div class="col-xs-9 box-basic">
            <!-- info about item>
            </div>
    </div>
</script>

我想要的东西是：

<div class="row">
    <tagName of itemView>
         first ItemView
      <end tagName of ItemView>

      <tagName of itemView>
            seconde ItemView
      <end tagName of ItemView>
 </div>

 <div class="row">
      <tagName of itemView>
            third ItemView
      <end tagName of ItemView>

      <tagName of itemView>
            fourth ItemView
      <end tagName of ItemView>
 </div>

有什么想法吗？提前致谢！

编辑：

我有一个解决方案，但实际上它不正确。

在compositeTemplate.html

的模板中

<script>
<span>
    <div class="row" id="cont1">
    </div>
    <div class="row" id="cont2">
    </div>
    <div class="row" id="cont3">
    </div>
</span>
 </script>

在CompositeView.js

中

 appendHtml: function(collectionView, itemView, index){
            var childrenContainer = collectionView.itemViewContainer ? collectionView.$(collectionView.itemViewContainer) : collectionView.$el;
            var children = childrenContainer.children();

            $("#cont"+(index%3+1)).append(itemView.el);
        },

有人知道这样做是否正确？

Answer 1

我会考虑创建一个临时集合并将对象分区为它。有关使用下划线的简单分区方法，请参阅：https://stackoverflow.com/a/11345570/402347。完成后，您可以轻松地遍历模板中的双重条目。

您可能必须覆盖视图中的serializeData（）方法，以将分区集合传递给模板。

Answer 2

在CompositeView中，您可以尝试覆盖getItemView方法。在下面的示例中，我的CompositeView选择图像库缩略图或文章缩略图，具体取决于即将渲染的模型。

这是在CoffeeScript中

getItemView: (item) ->
  switch item.get('type')
    when "ImageGallery"
      App.Views.ImageGalleries.Index.Thumbnail
    else
      App.Views.Articles.Index.Thumbnail

如何用Marionette将两个ItemView包装到同一个div中？

编辑：

2 个答案: