javascript - backbone.js structuring nested views and models

Question

Using backbone.js:

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.

Answer 1

To be able to reach attributes on related models, the model must have some kind of knowledge about what models it is related to. Backbone.js does not implicitly deal with relations or nesting, which means you must yourself make sure that the models have knowledge of each other. To answer your questions, one way to go about it is to make sure each child model has a 'parent' attribute. This way you can traverse the nesting first up to the parent and then down to any siblings that you know of.

To be more specific with your questions. When initializing modelA, you are probably creating modelB and modelC, I would suggest setting a link to the parent model when doing this, like this:

ModelA = Backbone.Model.extend({

    initialize: function(){
        this.modelB = new modelB();
        this.modelB.parent = this;
        this.modelC = new modelC();
        this.modelC.parent = this;
    }
}

This way you can reach the parent model in any child model function by calling this.parent.

Regarding your views, when doing nested backbone views, I find it easier to let each view represent one HTML tag by using the tagName option of the view. I would write your views as this:

ViewA = Backbone.View.extend({

    tagName: "div",
    id: "new",

    initialize: function(){
       this.viewB = new ViewB();
       this.viewB.parentView = this;
       $(this.el).append(this.viewB.el);
    }
});

ViewB = Backbone.View.extend({

    tagName: "h1",

    render: function(){
        $(this.el).html("Header text"); // or use this.options.headerText or equivalent
    },

    funcB1: function(){
        this.model.parent.doSomethingOnParent();
        this.model.parent.modelC.doSomethingOnSibling();
        $(this.parentView.el).shakeViolently();
    }

});

Then in your application initialization code (eg in your controller), I would initiate ViewA and place its element inside the body element.