主干.js 构建嵌套视图和模型

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

更具体地回答您的问题。初始化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 在任何子模型函数中访问父模型。

关于您的视图，在执行嵌套主干视图时，我发现使用视图的 tagName 选项让每个视图代表一个 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 元素中。

---

“我可以”这个问题的一般答案总是“可以，只要你愿意编写代码”。 Backbone 背后的要点是提供模型和视图的强大分离。如果 B1 引用了 A1，而 A1 引用了 C1，那么您完全有能力创建方法并设置 B1 可以修改 A1 和 C1 的规则等等。

视图应设置为接收来自其各自模型的 CRUD 事件。如果用户对 B1view 进行了修改 B1model 的操作，而 B1model 又修改了 A1model，则 A1model 应该生成一个事件，A1view 接收并导致 A1view 重新渲染，依此类推。它应该像魔术一样发生。 （在实践中，需要一些时间才能获得正确的魔法，但我发现 Backbone 非常强大。BackboneRelational 有助于解决您在此处描述的问题。）

---

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

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

主要是，模型的 toJSON() 现在返回过时的数据。我在 backbone.js plugin 中发布了解决此问题的解决方案。欢迎您使用它。

---

您可以使用一些扩展，例如 Backbone-Forms https://github.com/powmedia/backbone-forms。要遵循您的用例，请定义如下架构：

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

查看 https://github.com/powmedia/backbone-forms#customising-templates 以获取部分模板。

这里的重要部分是 type: 'NestedModel' 和 template: 'templateXXX'。

此插件有一些限制，但您可以在 https://github.com/documentcloud/backbone/wiki/Extensions%2C-Plugins%2C-Resources 中查看其他插件。

---

有骨干插件 Backbone-relational.js，它为 Backbone 的模型之间提供了一对一、一对多和多对一的关系。

我认为这个js会满足你的需求。访问 BackboneRelational 以获取更多文档。

---