I'm creating my very first app with Backbone.
Basically, I have a two-level deep unordered list.
<ul class="cabinet">
<li class="drawer">
<a>Drawer 1</a>
<ul class="boxes">
<li> Box 1 </li>
<li> Box 2 </li>
</ul>
</li>
<li class="drawer">
<a>Drawer 2</a>
<ul class="boxes">
<li> Box 3 </li>
<li> Box 4 </li>
</ul>
</li>
</ul>
In Backbone, I created two collections ("Drawer" and "Boxes"), with their associated Views.
My problem is that I don't know how should I handle the second level list items.
At this moment, I have a single Backbone Collection for boxes and each time I add new Box to
the collection, it will be render under each drawer. I should somehow separate the group of boxes based on the parent drawer but I don't know how can I do this in the "Backbone way".
In other words, let's say I need to add Box 3 and Box 4 elements to Drawer 2.
How can I render this two "boxes" under "Drawer 2". Should I have a separate collection for each drawer's group of boxes? If so, how can I dynamically create a collection with this purpose in Backbone? Is there any other way?