title: Creating nested models in Backbone with Backbone-relational
body: <p>I would like to use <a href="https://github.com/PaulUithol/Backbone-relational" rel="noreferrer">backbone-relational</a> to have nested models in my <a href="http://documentcloud.github.com/backbone/" rel="noreferrer">backbone.js</a> application.  </p>
  
  <p>I have been able to follow the examples in the documentation to create nested objects (e.g. one-to-many relations).  However I don't understand how to bind the lower level elements in a way that will update the upper level objects.  I think a working application would be a very helpful tutorial.</p>
  
  <p>So my question is: How do I extend the <a href="http://documentcloud.github.com/backbone/examples/todos/index.html" rel="noreferrer">Todos tutorial</a> using <code>backbone-relational</code> so that:</p>
  
  <ul>
  <li>one can add/remove subitems for each item</li>
  <li>double clicking on any subitem edits it (just like the original Todo example)</li>
  <li>clicking on an item hides/reveals its subitems</li>
  <li>subitems are not fetched separately but are simply an array attribute of Todo items</li>
  </ul>
  
  <p><strong>Update</strong>: I have <a href="http://jsfiddle.net/ZN96a/6" rel="noreferrer">created a jsfiddle for this question</a>.  So far I have:</p>
  
  <ul>
  <li>Imported the Todo example mentioned above</li>
  <li>Created a <code>TodoSubitem</code> model and a <code>TodoSubitemList</code> collection</li>
  <li>Altered the <code>Todo</code> model to extend <code>RelationalModel</code> instead of <code>Model</code>, with a <code>HasMany</code> relation to <code>TodoSubitem</code></li>
  <li>Added a <code>subitem-template</code> in the html code</li>
  </ul>
  
  <p>But I'm still not sure how to:</p>
  
  <ul>
  <li>add an input field for <code>subitems</code> that appears only when you click a <code>Todo</code> div</li>
  <li>have subitem data as an attribute of <code>Todo</code> objects, but still have <code>TodoSubitemView</code> bind DOM elements to them (e.g. <code>&lt;li&gt;</code> tags).</li>
  </ul>