Javascript backbone.js结构化嵌套视图和模型

使用backbone.js：

我有一个顶级ModelA，它包含两个属性和两个嵌套模型ModelB和ModelC。ModelB和ModelC各有2个属性，如下所示：

ModelA
    attributeA1
    attributeA2
    ModelB
        attributeB1
        attributeB2
    ModelC
        attributeC1
        attributeC2

ModelA有一个ViewA，ModelB有一个ViewB。 ViewA的“渲染”功能将新的div放置在主体上，而ViewB的“渲染”功能将创建一个新的div。ViewA的初始化调用ViewB的render将h1插入到新的div中。这种分离的基本原理是h1可能会更改，并且需要独立于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?

ViewA
初始化：
//调用ViewA自己的渲染函数
this.render（）
//调用ViewB的render函数，进一步修改先前创建的$（“#new”）div。
$（“#新建”）.append（ViewB.render（）.el）
//ViewA自己的渲染函数
渲染：//放置到“主体”上
视图b
渲染：//创建一个
funcB1://这可以访问其父模型A的属性和其他对象吗？

Q1:ViewB有一个函数funcB1。此函数能否访问其父模型的属性？属性，例如attributeA1，甚至attributeC1（可能是兄弟姐妹/表亲）

Q2：作为对Q1的进一步扩展，funcB1可以访问与ViewA关联的DOM元素吗？（在本例中，是#new div？）

问题3：一般来说，我如何定义上述视图和模型之间的关联，以便所有内容都正确地联系在一起

---

我意识到这个问题有点抽象，但任何人都非常感谢任何帮助或指导方针。

对于“我可以”这个问题的一般回答总是“是的，只要你愿意编写代码。”主干背后的要点是提供模型和视图的强大分离。如果B1引用A1，A1引用C1，那么您完全可以创建方法并设置B1可以修改A1和C1的规则，依此类推

---

应将视图设置为从其各自的模型接收CRUD事件。如果用户使用B1view修改B1model，B1model反过来修改A1model，那么A1model应该生成A1view接收并导致A1view重新渲染的事件，依此类推。它应该像魔术一样发生。（在实践中，需要一些时间才能掌握正确的方法，但我发现主干非常强大。BackbonRelational有助于实现您在这里描述的内容。）

要获得相关模型的属性，该模型必须了解与之相关的模型。Backbone.js不隐式处理关系或嵌套，这意味着您必须自己确保模型相互了解。要回答您的问题，一种方法是确保每个子模型都有一个“parent”属性。通过这种方式，您可以先遍历嵌套到父级，然后再遍历到您知道的任何兄弟级

更具体地回答你的问题。在初始化modelA时，您可能正在创建modelB和modelC，我建议在执行此操作时设置指向父模型的链接，如下所示：

ModelA = Backbone.Model.extend({

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

这样，您可以通过调用This.parent来访问任何子模型函数中的父模型

关于视图，在进行嵌套主干视图时，我发现使用视图的标记名选项，让每个视图表示一个HTML标记更容易。我想把你的观点写下来：

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元素中。

上述解决方案是正确的，但存在一些问题

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

---

主要是，模型的toJSON（）现在返回陈旧的数据。我已经发布了一个解决方案来解决这个问题。欢迎你使用它

您可以使用一些扩展，例如主干表单。要遵循您的用例，请定义如下模式：

var ModelB = Backbone.Model.extend({
    schema: {
        attributeB1: 'Text',
        attributeB2: 'Text'
    }
});

var ModelC = Backbone.Model.extend({
    schema: {
        attributeC: 'Text',
    }
});

var ModelA = Backbone.Model.extend({
    schema: {
        attributeA1: 'Text',
        attributeA2: 'Text',
        refToModelB: { type: 'NestedModel', model: ModelB, template: 'templateB' },
        refToModelC: { type: 'NestedModel', model: ModelC, template: 'templateC' }
    }
});

查看部分模板

这里的重要部分是

类型：'NestedModel'

和

模板：'templateXXX'

---

该插件有一些限制，但您可以查看其他插件。

有主干插件backbone-relational.js，它在主干模型之间提供一对一、一对多和多对一关系

我认为这个js会满足你的需求。

---

查看更多文档。

您是否尝试过编写测试以查看这些测试是否回答了您的问题？我尝试过使用一些Q1和Q2的代码，但无法让它们正常工作。我想问这个问题最好的方法就是用伪代码，让更多精通js的人给我指出正确的方向。我建议你用失败的代码分别写问题，这样js程序员就可以指出问题所在。当然，这是公平的，我会试着写一些。在任何情况下，如果有人仍然想提供任何意见，我们仍然欢迎！这里有一个相关的（虽然更一般）问题&关于这个问题的详细答案：谢谢。我认为更准确的答案应该是“是的，只要你愿意并且能够编写代码”！如果可以的话，我有个问题。在回答开始时，在ModelA的

initialize

方法中创建modelB时，是否应通过

this.set（'modelB'）=new modelB（）进行设置

或在此实例中不使用setter方法是否可以？如果希望关系位于模型的属性中（例如，能够绑定到更改事件），可以使用setter方法。其语法是this.set（{modelB:newmodelb（）}）。但是，如果要进行更复杂的关系映射，我强烈推荐Paul Uhitol的backbone relational或其他用于backbone.js的关系映射插件。由于这会创建循环引用，是否存在内存泄漏？请注意，如果ViewA具有渲染方法，则在初始化方法中将B.el附加到a.el将被关闭；您的示例之所以有效，是因为父视图是无渲染视图。确实，这是一个警告。我用这个做李控制器