title: Appending children to the same block as parent view
body: <h2>Don't be intimidated by the length of my question, in general, the question is:</h2>
  <h3>How can I append grandchildren of a <code>CompositeView</code> to the same block as the grandchildren's parent's?</h3>
  <p>The <code>childViewContainer</code> of  a <code>CompositeView</code> is smart enough to identify a selector that exists in its own template. But, a child <code>CompositeView</code> of that view that would like to use a selector in the parent template as a <code>childViewContainer</code> for it's own children views would cause Backone to throw an error. The problem being that the 'childViewContainer' in the first child would not know to look at the parent template for that selector. Therefore, if I specify a selector that exist int the grandparent template, grandchildren will not have a valid <code>childViewContainer</code> to attach to.</p>
  <hr />
  <h3>The rest of this post elaborates on my particular issue. If you have any ideas that may resolve my particular issue, great. But if you had the above question above and found a solution I will mark it as an <em>Answer</em>.</h3>
  <p>I have a collection of nested models. A model looks something like:</p>
  <pre><code>var aModel =
     {
        prop1.1: value1.1,
        prop1.2: value1.2,
        prop1.3: [ 
           {
              prop2.1.1: value2.1.1,
              prop2.1.2: value2.1.2 
            },
           . 
           . 
           . 
           {
              prop2.N.1: value2.N.1,
              prop2.N.2: value2.N.2 
           }
        ]
      }
  </code></pre>
  <p>At the top level is a <code>CompositeView</code> with the following</p>
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  View1.HeadRow.Column1
              &lt;/th&gt;
              &lt;th&gt;
                  View1.HeadRow.Column2
              &lt;/th&gt;
              &lt;th&gt;
                  View1.HeadRow.Column3
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class=&quot;tbody1&quot;&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>This view, call it <code>View1</code>,  spawns <code>CompositeView</code> children, say <code>View2</code> children, that will render <code>tr</code> <code>el</code>. The childContainer in <code>View1</code>, naturally, is its <code>&lt;tbody&gt;</code> (i.e., in the template above).</p>
  <p>'View2' will render children <code>ItemView</code>s, call them View3<code>children.</code>View3<code>children render</code>tr<code> </code>el` as well.</p>
  <p>While at this point my scheme implies a nested structure (<code>View1 &gt; View2 &gt; View3</code>). What I'm trying to accomplish is that <code>View2</code> and <code>View3</code> should render as siblings. To illustrate the result should look like this:</p>
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  View1.HeadRow.Column1
              &lt;/th&gt;
              &lt;th&gt;
                  View1.HeadRow.Column2
              &lt;/th&gt;
              &lt;th&gt;
                  View1.HeadRow.Column3
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class=&quot;tbody1&quot;&gt;
          &lt;tr&gt;
              &lt;td rowspan=&quot;N+1&quot;&gt;
                  View2.Row1.Column1
              &lt;/td&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  View3.Row2.Column2
              &lt;/td&gt;
              &lt;td&gt;
                  View3.Row2.Column3
              &lt;/td&gt;
          &lt;/tr&gt;
            .
            .
            .
          &lt;tr&gt;
              &lt;td&gt;
                  View3.RowN.Column2
              &lt;/td&gt;
              &lt;td&gt;
                  View3.RowN.Column3
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;  
  </code></pre>
  <p>A rendered sample with two models, would look like:
  <img src="https://i.stack.imgur.com/ipjXj.png" alt="Child as Sibling" /></p>
  <p>I thought the key to rendering <code>View3</code> as a sibling of <code>View2</code> would be to assign <code>View3</code> the same childViewContainer as <code>View2</code>, that is,</p>
  <pre><code>childViewContainer: 'tbody.tbody1'
  </code></pre>
  <p>in the <code>View2</code> view
  <code>View2</code> is the view spawning <code>View3</code>. However, the <code>'tbody.tbody1'</code> selector is defined in the <code>View1</code> template. Therefore, at the time when <code>View3</code> children are being rendered, the <code>'tbody.tbody1'</code> selector is not in the DOM. How can I append <code>View3</code> children in the same block as <code>View2</code> children?</p>