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

问题描述

使用Backbone.js的：

Using backbone.js:

我有一个包含2属性和2嵌套模型，ModelB和ModelC顶级MODELA。 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

有一个ViewA为MODELA，以及用于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元素？ （在这个例子中，＃新格？）

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?

我意识到这个问题有点抽象，但任何接入点preciate任何帮助或指导AP preciated。

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.

关于你的意见，做嵌套骨干视图时，我发现它更容易使用视图的点名选项让每个视图重present 1 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();
    }

});

然后在你的应用程序初始化code（如控制器），我将启动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屋！