How wrap two ItemView into same div with Marionette?

Question

I have a CompositeView with its template, and ItemView with its template. all right!

But now I want to wrap two itemView into a same div, i.e.

The first ItemView, and the second ItemView into a The third ItemView, and fourth itemView into other ... etc

I know that I can use the ItemIndex in template of ItemView.. but I don't know use this value in template of Composite View

I have:

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
          }
        }
    });

My template of ItemView is:

    <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>

I want something as :

<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>

Any idea ? thanks in advance!

EDIT:

I have a solution, But really it not is correct.

In the template of compositeTemplate.html

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

And in the 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);
        },

Somebody know do it of correct way?

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

I would look into creating a temporary collection and partitioning the objects into it. See: https://stackoverflow.com/a/11345570/402347 for an easy partition method using underscore. Once you do that, you can easily loop over the double entries in your template.

You'll probably have to override the serializeData() method in your view to pass in the partitioned collection to your template.

edited May 23 '17 at 11:49

Community

1
1

answered Jan 23 '14 at 20:31

Ted Kulp

1,434
13
11

I dont understand this solution. How it work in Marionette ? I have a compositeView and a ItemView.. How can I send two items to the itemView.. ? With the method SerializeData in ItemView only I have a item... I think that I can use the method appendHtml, but I do not find the solution to this problem – Chrysweel Jan 24 '14 at 11:59

score 0 · Accepted Answer · answered Jan 25 '14 at 14:43

In your CompositeView you could try overriding the getItemView method. In my example below my CompositeView chooses either the Image Gallery thumbnail or the Article Thumbnail depending on the model that is about to be rendered.

This is in CoffeeScript

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

How wrap two ItemView into same div with Marionette?

EDIT:

2 Answers2