Backbone.js 构建嵌套视图和模型 [英] backbone.js structuring nested views and models

问题描述

使用backbone.js:

Using backbone.js:

我有一个顶级 ModelA，其中包含 2 个属性和 2 个嵌套模型，ModelB 和 ModelC.ModelB 和 ModelC 各有 2 个属性，如下所示:

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

ModelA 有一个 ViewA，ModelB 有一个 ViewB.ViewA 的渲染函数将一个新的 div 放置到主体上，而 ViewB 的渲染创建了一个 h1.ViewA 的初始化调用 ViewB 的渲染将 h1 插入到新的 div 中.这种分离背后的基本原理是 h1 可能会改变并需要独立于 ViewA 重新渲染.

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 有一个函数 funcB1.这个函数可以访问它的父模型的属性吗?诸如attributeA1，甚至attributeC1(这将是兄弟/表亲)之类的属性?

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:作为对Q1的进一步扩展，funcB1可以访问与ViewA关联的DOM元素吗?(在这个例子中，#new div?)

Q2: As a further expansion to Q1, can funcB1 access the DOM elements associated with ViewA? (in this example, the #new div?)

Q3:一般来说，我如何定义视图和模型之间的关联，以便将所有内容正确地联系在一起?

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.

推荐答案

为了能够访问相关模型的属性，模型必须对它所关联的模型有某种了解.Backbone.js 不会隐式处理关系或嵌套，这意味着您必须自己确保模型彼此了解.要回答您的问题，一种方法是确保每个子模型都具有父"属性.通过这种方式，您可以首先遍历嵌套，然后遍历您知道的任何兄弟姐妹.

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.

更具体地说明您的问题.初始化modelA时，您可能正在创建modelB和modelC，我建议在执行此操作时设置到父模型的链接，如下所示:

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.parent 来访问任何子模型函数中的父模型.

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

关于您的视图，在进行嵌套主干视图时，我发现使用视图的 tagName 选项让每个视图代表一个 HTML 标签更容易.我会把你的观点写成这样:

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();
    }

});

然后在您的应用程序初始化代码中(例如在您的控制器中)，我将启动 ViewA 并将其元素放在 body 元素中.

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

这篇关于Backbone.js 构建嵌套视图和模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！