title: Rendering a recursive structure using CompositeView while encapsulating each Model in an ItemView with Marionette
body: <p>I'll start with a clear question and explain on after :<br />
  <strong>How to properly encapsulate a model, contained in a <code>CompositeView</code>, into an <code>ItemView</code></strong></p>
  <p>My problem is simple, but I can't manage to get something good working.
  I have a tree of Notes.
  Each note is a Backbone.model and has a <code>@descendants</code> collection,
  I then have a Backbone.Collection to represent that tree (of which @descendants is an instance)
  I setup a basic <code>CollectionView</code>, with, as an <code>itemView</code>, the <code>CompositeView</code>. Everything rendered perfectly and I was quite happy about it. This working solution is shown in the first snippet of code!</p>
  <p>Here comes the problem. Building on this, I kinda ran into this issue : <a href="http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/" rel="nofollow noreferrer">Events fired for whole hierarchy</a>
  which make sense for how my events where bound. At first, I simply added unique selectors (added data-guid to my html elements so I could get them by it) and it worked alright, although it was already getting &quot;hacky&quot;. But other similar problem have risen so I decided I needed a solution for this.
  So, I told myslef, let's encapsulate each model in an ItemView and use the Composite view to recursively render them.
  But... This has not been for the best in all worlds...</p>
  <p>Here is what I had in the beginning :</p>
  <pre><code>class Note.ModelView extends Marionette.CompositeView
    template: &quot;note/noteModel&quot;
    id: &quot;note-item&quot;
    itemViewContainer: &quot;.note-descendants&quot;
    ui:
      noteContent: &quot;.noteContent&quot;
    events:
      &quot;keypress .noteContent&quot;: &quot;createNote&quot;
      &quot;click .destroy&quot;: &quot;deleteNote&quot;
    # ...
    initialize: -&gt;
      @collection = @model.descendants
    # ...
  
  class Note.CollectionView extends Marionette.CollectionView
    id: &quot;note-list&quot;
    itemView: Note.ModelView
    initialize: -&gt;
      @listenTo @collection, &quot;sort&quot;, @render
  </code></pre>
  <p>Now I transferred every thing that belongs to rendering the Model in a new ItemView</p>
  <pre><code>  class Note.ModelView extends Marionette.ItemView
      template: &quot;note/noteModel&quot;
  
      ui:
        noteContent: &quot;.noteContent&quot;
      events: -&gt;
        guid = @model.get 'guid'
        events = {}
        events[&quot;keypress #noteContent#{guid}&quot;] = &quot;createNote&quot;
        events[&quot;blur #noteContent#{guid}&quot;] = &quot;updateNote&quot;
        events[&quot;click #destroy#{guid}&quot;] = @triggerEvent 'deleteNote'
  
      initialize: -&gt;
        @bindKeyboardShortcuts()
        @listenTo @model, &quot;change:created_at&quot;, @setCursor
  
    class Note.TreeView extends Marionette.CompositeView
      template: &quot;note/parentNote&quot;
      itemView: Note.ModelView
  
      initialize: -&gt;
        @collection = @model.descendants
        @listenTo @collection, &quot;sort&quot;, @render
        _.bindAll @, &quot;renderItem&quot;
      renderItem: (model) -&gt;
        if model.get('parent_id') is 'root'
          itemView = new Note.ModelView model: model
          itemView.render()
          @$el.append itemView.el
      onRender: -&gt;
        @collection.each this.renderItem
        @renderItem @model
      appendHtml: (collectionView, itemView) -&gt;
        @model.descendants.each (note) =&gt;
          iv = new Note.ModelView model: note
          iv.render()
          @.$('.note-descendants').append iv.el
  
  
    class Note.CollectionView extends Marionette.CollectionView
      id: &quot;note-list&quot;
      itemView: Note.TreeView
      initialize: -&gt;
        @listenTo @collection, &quot;sort&quot;, @render
  </code></pre>
  <p>and the noteMode template (parentNote is just an empty template right now)</p>
  <pre><code>&lt;button class=&quot;btn btn-danger btn-xs untab&quot;&gt;UN&lt;/button&gt;
  &lt;button class=&quot;btn btn-success btn-xs tab&quot;&gt;TAB&lt;/button&gt;
  &lt;div class=&quot;noteContent&quot;&gt;{{{indent}}}{{{title}}}&lt;/div&gt;
  &lt;button class=&quot;destroy&quot;&gt;&lt;/button&gt;
  &lt;div class=&quot;note-descendants&quot;&gt;&lt;/div&gt; # That is where I'm putting the children notes
  </code></pre>
  <p>So this is almost working. But it's hacky and.. well it still doesn't quite work. I've been reading through all documentations, and I've read those two links <a href="http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/" rel="nofollow noreferrer">Derick Bailey on nested structure and CompositeView</a> and <a href="http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/" rel="nofollow noreferrer">David Sulc on Nested Views</a> but I still feel I'm missing some important details.</p>
  <p>What I'm looking for, as an answer, is any hint or any common way to manage this with Marionette. I'm really looking for something clean since this is going to be one of the angular piece on which the app will be built.<br />
  Maybe also I'm searching in the wrong place? Anything will be welcome!! Thank you very much</p>
  <p>I wish you all a very nice night.
  Thank you for your time.</p>