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

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

在您的 CompositeView 中，您可以尝试覆盖 getItemView 方法。在下面的示例中，我的 CompositeView 根据要渲染的模型选择图像库缩略图或文章缩略图。

这是在 CoffeeScript 中

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