Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating nested models in Backbone with Backbone-relational
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload