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

我有一个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);
        },

有人知道这样做正确吗？

最佳答案

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

这是在CoffeeScript中

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

关于javascript - 如何用 Marionette 包装两个ItemView到同一个div中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21310786/