Search code examples
marionette

Display item in Marionette CollectionView that's not member of the collection?

I have a Marionette CollectionView where each of the childViews are floating in a grid fashion (where each X is a childView):

X X X X
X X X

I'd like to have a plus button that is floating in the grid as well but won't actually be representing an item in the collection. So it would look like this:

X X X X
X X X +

Does anyone have an idea or strategy for how this could be done with Marionette?

Solution

  • We do exactly this in our app. To achieve it we have a composite view with a template like:

    <div class='my-composite-view'>
  <div class='my-child-view-container'>
  </div>
  <div class='my-plus-button'>
  </div>
</div>

    As long as you float all the divs in the my-child-view-container and then float the my-plus-button div as well you will get exactly what you want.

    http://jsfiddle.net/cn1gp4m4/