I have a top level ModelA that contains 2 attributes and 2 nested models, ModelB and ModelC. ModelB and ModelC each have 2 attributes as follows:
ModelA attributeA1 attributeA2 ModelB attributeB1 attributeB2 ModelC attributeC1 attributeC2
There is a ViewA for ModelA, and a ViewB for ModelB. ViewA's render function places a new div onto the body, whereas ViewB's render creates an h1. ViewA's initialization calls ViewB's render to insert that h1 into the new div. The rationale behind this separation is that the h1 may change and require re-rendering independent from ViewA.
ViewA initialise: //call ViewA's own render function this.render() //call ViewB's render function that further modifies the $("#new") div created earlier. $("#new").append(ViewB.render().el) //ViewA's own render function render: //place <div id="new"></div> onto 'body' ViewB render: //create a <h1></h1> funcB1: //can this access it's parent ModelA's attributes and other objects?
Q1: ViewB has a function funcB1. Can this function access it's parent model's attributes? Attributes such as attributeA1, or even attributeC1 (which would be a sibling/cousin)?
Q2: As a further expansion to Q1, can funcB1 access the DOM elements associated with ViewA? (in this example, the #new div?)
Q3: In general, how do I define the associations between the Views and Models as described above so that everything ties together properly?
I realize this question is somewhat abstract but any appreciate any help or guidelines appreciated.