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

Question

使用backbone.js：

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

ModelA
    attributeA1
    attributeA2
    ModelB
        attributeB1
        attributeB2
    ModelC
        attributeC1
        attributeC2

ModelA 有一个 ViewA，ModelB 有一个 ViewB。 ViewA 的渲染函数将一个新的 div 放到 body 上，而 ViewB 的渲染创建一个 h1。 ViewA 的初始化调用 ViewB 的渲染将 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?

Q1：ViewB 有一个函数 funcB1。这个函数可以访问它的父模型的属性吗？诸如attributeA1之类的属性，甚至attributeC1（可能是兄弟/表亲）？

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

Q3：一般情况下，我如何定义上述视图和模型之间的关联，以便将所有内容正确关联在一起？

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

Answer 1

为了能够获得相关模型的属性，模型必须对它所关联的模型有某种了解。 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 元素中。

Answer 2

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

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

Answer 3

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

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

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

Answer 4

您可以使用一些扩展，例如 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查看其他插件。

Answer 5

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

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