title: Rendering nested collections using Backbone.Marionette and Backbone.Relational
body: <p>I'm trying to make a simple calendar/todo-list with Backbone.js.</p>
  
  <p>I have a collection of Days that can each have multiple Todos.
  I would like to render each date into an unordered list containing itself an unordered list of todos. Here is my HTML :</p>
  
  <pre><code>&lt;ul id="days-list"&gt;
      &lt;!-- #day-tpl --&gt;
  &lt;/ul&gt;
  
  &lt;script id="day-tpl" type="tpl"&gt;
      &lt;h1&gt;To-do for {{name}}&lt;/h1&gt;
      &lt;ul class="todos-list"&gt;
          &lt;!-- todo-tpl --&gt;
      &lt;/ul&gt;
  &lt;/script&gt;
  
  &lt;script id="todo-tpl" type="tpl"&gt;
      {{title}}
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is my JS so far (I have Backbone, Backbone.Marionette and Backbone.Relational included in the HTML).</p>
  
  <pre><code>Todo = Backbone.RelationalModel.extend({});
  
  Todos = Backbone.Collection.extend({
      model: Todo,
      idAttribute: 'id_todo'
  });
  
  Day = Backbone.RelationalModel.extend({
      relations:[{
          type: Backbone.HasMany,
          key: 'todos',
          relatedModel: 'Todo',
          collectionType: 'Todos',
          reverseRelation:{
              key: 'day',
              includeInJSON: 'id'
          }
      }]
  });
  
  Days = Backbone.Collection.extend({
      model: Day
  });
  
  TodoView = Backbone.Marionette.ItemView.extend({
      tagName: 'li',
      template: '#todo-tpl'
  });
  
  TodosView = Backbone.Marionette.CollectionView.extend({
      itemView: TodoView
  });
  
  DayView = Backbone.Marionette.ItemView.extend({
      tagName: 'li',
      template: '#day-tpl'
  });
  
  DaysView = Backbone.Marionette.CollectionView.extend({
      el: $('#days-list'),
      itemView: DayView
  });
  
  $(document).ready(function(){
      var days = new Days([
          {
              "id": 1,
              "name": "Monday",
              "todos": [
                  {
                      "id_todo": 1,
                      "title": "Learn Javascript"
                  },
                  {
                      "id_todo": 2,
                      "title": "Learn Node.js"
                  }
              ]
          },
          {
              "id": 2,
              "name": "Tuesday",
              "todos": [
                  {
                      "id_todo": 3,
                      "title": "Learn Backbone"
                  },
                  {
                      "id_todo": 4,
                      "title": "Learn Backbone.Marionette"
                  }
              ]
          }
      ]);
  
      var daysView = new DaysView({collection: days});
      daysView.render();
  });
  </code></pre>
  
  <p>The Day collection displays fine (thanks to Marionette !) but I don't know how I'm supposed to render the Todo collections for each day. Any ideas ? Thanks !</p>
  
  <p>EDIT : I've found a way, but I'm not sure it's the right way to do it.</p>
  
  <p>I edited my DayView as follows :</p>
  
  <pre><code>DayView = Backbone.Marionette.ItemView.extend({
      tagName: 'li',
      template: '#day-tpl',
      onRender: function(){
          var $todosList = this.$el.find('.todos-list');
          var todos = new Todos(this.model.get('todos').toJSON());
          var todosView = new TodosView({collection: todos, el: $todosList});
          todosView.render();
      }
  });
  </code></pre>
  
  <p>It does render each todo correctly under the right day, but the use of jquery find and toJSON is a code smell.</p>