javascript - How to structure nested Models and views? -

using backbone.js:

i have collection of modela contains several attributes , 1 "node" holds several modelb. modelb contains several attributes.

collectiona   modela   attribute 1   .   .   attribute n   "node"      modelb        attribute 1        attribute 2      modelb        attribute 1        attribute 2   modela   attribute 1   .   .   attribute n   "node"      modelb        attribute 1        attribute 2      modelb        attribute 1        attribute 2 

i'm still working on views main idea views should structured in similar way. (collection view holds several view holds several view b). same modelb never shared between multiple viewb.

q1: design make sense or obvious flaws should consider? (this first try backbonejs).

q2: best way set "node"? right i'm using array of modelbs. possible have collection of modelb on each modela instead? approach better?

any guidelines appriciated!

i point out i've read this excellent post on related issue (recommended). case did not contain modelb in array/collection in same way 1 does.

q1: design make sense or obvious flaws should consider? design assumptions: collection has many model as, model has collection of model bs, each model b has it's own view b.

q2: possible have collection of modelbs on each modela?

answer: doable.

it's common models have bunch of related sub-models "in" them. can go creating (like mention) array, object, collection hold model bs (let's call container.) basic way create container , instantiate new models , plug them in. want kind of reference in model bs related parent model can return state later. each model b has modela_id attribute.

this might use of paul uithol's backbone-relational.

with backbone-relational, can setup model (class) , define in such way has collection of model bs. here code looks like.

modela = backbone.relationalmodel.extend({     relations: [{         type: backbone.hasmany,         key: 'modelbs',         relatedmodel: 'modelb',         collectiontype: 'modelbcollection',         reverserelation: {             key: 'parenta'         }     }],     defaults: ...,     initialize: ...,     etc. ... // other instance properties , functions of model. }); 

when this, every model instantiate have collection of model bs can referenced through modela attribute modelbs. or key designate.

here looks instantiate modela.

mymodela = new modela({     // setting modela attributes...     'modelbs': [1, 3, 7] }); 

i've instantiated modela , along setting other attributes may have defined, i'm setting the value attribute modelbs of modela. array of ids of each modelb related modela. how collection knows modelbs associated modela.

mymodela.fetchrelated('modelbs'); 

your .fetchrelated() call sends request server populate modelbs collection modelb 1, 3, , 7.

when want access collection of modelbs in modela, this.

mymodela.get('modelbs'); 

this returns collection of modelbs related modela assuming you've fetched related models , collection has modelbs in it.

the nice thing backbone-relational makes easy establish these defined relations automatically, on instantiation of parent model. creates reverse relation traversing , down parent child, child parent easy.

if manipulating modelb , wanted modela, use reverserelation key established parenta.

somemodelb.get('parenta');    // points related modela 

it helps bindings , other problems prop when have models in models in models. relational works 1 one, 1 many , inverse relationships. there workaround many many don't think it's common because it's difficult proposition way things set up.

as views, i'm not sure you're thinking need have "collection" of views?

let's have modela collection of modelbs. each modelb has associated view. illustrated nicely concept of old-fashioned list.

<div id="modelaview">     <ul>         <li>modelb_1</li>         <li>modelb_3</li>         <li>modelb_7</li>     </ul> </div> 

while there bunch of modelbs, have them nice , tidy in collection. if go data driven way of managing views, there no need put view objects in list. instead, can make them self managing!

// assume when instantiate viewb, pass modelb.  viewb = backbone.view.extend({     initialize: function() {         this.model.bind('remove', this.remove, this);         this.model.bind('update:colorattr', this.updatecolor, this);     },     updatecolor: function() {         this.$el.css('color', this.model.colorattr);     } }); 

now rid of modelb collection.

mymodela.get('modelbs').remove(somemodelb); 

then view associated modelb automatically removed view.

not sure if had in mind. go approach. anyway, if there more specifics post em in comments. hope helps.