title: Backbone: Collection nested in a model
body: <p>I will list some code and explain the situation.<br>
  <strong>(1)</strong> I instantiate the <code>App.views.tasks</code>. In the <code>initialize</code> function of this view, I fetch the tasks.<br>
  <strong>(2)</strong> From the <code>render</code> function, I instantiate a <code>App.views.task</code> for each task.<br>
   <strong>(3)</strong> In the <code>initialize</code> function of <code>App.views.task</code>, I instantiate an <code>App.views.comments</code> and I pass to it the collection of comments and the reference to the <code>DOM</code> element, where the task is rendered.<br>
  <strong>(4)</strong> <code>App.views.comments</code> kicks the fetching of the comments of the task.  </p>
  
  <p><strong>Question</strong>:<br>
  The reference to the <code>DOM</code> element that I pass to the <code>App.views.comments</code> would be <code>undefined</code> if there wasn't the delay induced by the <code>fetching</code> of the comments.<br>
  If I passed the reference <code>el</code> in the <code>render</code> function, everything would be fine, but that also means that <code>App.views.comments</code> is instantiated every time <code>render</code> is called, which is not fine.  So this is only a lucky way to do it, it only gets the chance to have it defined because there is a <code>fetching</code>, otherwise it would be <code>undefined</code>.<br>
  I added some comments that explain in place what happens, you can find them in <code>App.views.task</code> and <code>App.views.comments</code>.    </p>
  
  <p><strong>What is the best way to solve this possible in some cases issue?</strong></p>
  
  <pre><code>App.collections.Tasks = Backbone.Collection.extend({
          model: App.models.Task,
          url: App.baseHrefReq + '/tasks/all'
  });
  App.models.Task = Backbone.Model.extend({
  initialize: function() {
              this.set({comments: new App.collections.taskComments});
              this.get('comments').url = App.baseHrefReq + '/comments/get/task-id/' + this.get('id');
          }
  });
  App.views.tasks = Backbone.View.extend({
          initialize: function() {
              App.iCollections.Tasks = new App.collections.Tasks;
  
              App.iCollections.Tasks.bind('reset', this.render, this);
              App.iCollections.Tasks.bind('add', this.renderTask, this);
  
              App.iCollections.Tasks.fetch();
          },
          render: function() {
              $('.feed-list').html('');
              App.iCollections.Tasks.each(this.renderTask);
  
          },
          renderTask: function(task) {
              var view = new App.views.task({model: task});
              $('.feed-list').append(view.render().el);
          }
      }); 
      App.iViews.tasks = new App.views.tasks;
  
  App.views.task = Backbone.View.extend({
          tagName: 'li',
          template: _.template($('#task-item-template').html()),
          initialize: function() {
              this.model.bind('change', this.render, this);
              this.model.bind('destroy', this.remove, this);
              this.model.get('comments').bind('reset', this.render, this);
              this.model.get('comments').bind('add', this.render, this);
              this.model.get('comments').bind('remove', this.render, this);
              //I pass the DOM reference here
              this.commentsView = new App.views.comments({collection: this.model.get('comments'), el: this.$el}); 
          },
          render: function() {
              var modelJSON = this.model.toJSON();
              //the DOM reference is only ready and defined here
              this.$el.html(this.template(modelJSON)); 
  
  
              return this;
          }
  });
  App.views.comments = Backbone.View.extend({
          initialize: function() {
              _.bindAll(this, 'render', 'renderComment');
  
              this.collection.bind('reset', this.render, this);
              this.collection.bind('add', this.renderComment, this);
              this.collection.bind('remove', this.remove, this);
  
              this.collection.fetch();
  
          },
          render: function() {
              //if there wasn't the fetch() above, $el would be undefined at this point
              this.$el.find('.feed-comments ul').html('');
              this.collection.each(this.renderComment);
  
          },
          renderComment: function(comment) {
              var view = new App.views.comment({model: comment});
              this.$el.find('.feed-comments ul').append(view.render().el);
          }
      });
  });
  App.views.comment = Backbone.View.extend({...})
  </code></pre>