title: How to handle initializing and rendering subviews in Backbone.js?
body: <p>I have three different ways to initialize and render a view and its subviews, and each one of them has different problems. I'm curious to know if there is a better way that solves all of the problems:</p>
  
  <hr>
  
  <h2>Scenario One:</h2>
  
  <p>Initialize the children in the parent's initialize function. This way, not everything gets stuck in render so that there is less blocking on rendering.</p>
  
  <pre><code>initialize : function () {
  
      //parent init stuff
  
      this.child = new Child();
  },
  
  render : function () {
  
      this.$el.html(this.template());
  
      this.child.render().appendTo(this.$('.container-placeholder');
  }
  </code></pre>
  
  <p>The problems:</p>
  
  <ul>
  <li><p>The biggest problem is that calling render on the parent for a second time will remove all of the childs event bindings. (This is because of how jQuery's <code>$.html()</code> works.) This could be mitigated by calling <code>this.child.delegateEvents().render().appendTo(this.$el);</code> instead, but then the first, and the most often case, you're doing more work unnecessarily.</p></li>
  <li><p>By appending the children, you force the render function to have knowledge of the parents DOM structure so that you get the ordering you want. Which means changing a template might require updating a view's render function. </p></li>
  </ul>
  
  <hr>
  
  <h2>Scenario Two:</h2>
  
  <p>Initialize the children in the parent's <code>initialize()</code> still, but instead of appending, use <code>setElement().delegateEvents()</code> to set the child to an element in the parents template.</p>
  
  <pre><code>initialize : function () {
  
      //parent init stuff
  
      this.child = new Child();
  },
  
  render : function () {
  
      this.$el.html(this.template());
  
      this.child.setElement(this.$('.placeholder-element')).delegateEvents().render();
  }
  </code></pre>
  
  <p>Problems:</p>
  
  <ul>
  <li>This makes the <code>delegateEvents()</code> necessary now, which is a slight negative over it only being necessary on subsequent calls in the first scenario.</li>
  </ul>
  
  <hr>
  
  <h2>Scenario Three:</h2>
  
  <p>Initialize the children in the parent's <code>render()</code> method instead.</p>
  
  <pre><code>initialize : function () {
  
      //parent init stuff
  },
  
  render : function () {
  
      this.$el.html(this.template());
  
      this.child = new Child();
  
      this.child.appendTo($.('.container-placeholder').render();
  }
  </code></pre>
  
  <p>Problems:</p>
  
  <ul>
  <li><p>This means that the render function now has to be tied down with all of the initialization logic as well.</p></li>
  <li><p>If I edit the state of one of the child views, and then call render on the parent, a completely new child will be made and all of its current state will be lost. Which also seems like it could get dicey for memory leaks.</p></li>
  </ul>
  
  <hr>
  
  <p>Really curious to get your guys' take on this. Which scenario would you use? or is there a fourth magical one that solves all of these problems?</p>
  
  <p>Have you ever kept track of a rendered state for a View? Say a <code>renderedBefore</code> flag? Seems really janky.</p>