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?