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

Question

使用 backbone.js：

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

ModelA
    attributeA1
    attributeA2
    ModelB
        attributeB1
        attributeB2
    ModelC
        attributeC1
        attributeC2

ModelA 有一个 ViewA，ModelB 有一个 ViewB。 ViewA 的渲染 function 将一个新的 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 有一个 function funcB1。 这个 function 可以访问它的父模型的属性吗？ 诸如attributeA1 之类的属性，甚至是attributeC1（这将是兄弟/表亲）？

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

Q3：一般来说，我如何定义上述视图和模型之间的关联，以便一切都正确地联系在一起？

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

Answer 1

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

更具体地回答您的问题。 初始化模型A时，您可能正在创建模型B和模型C，我建议在执行此操作时设置到父model的链接，如下所示：

ModelA = Backbone.Model.extend({

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

通过这种方式，您可以通过调用 this.parent 到达任何子 model function 中的父 model。

关于您的视图，在进行嵌套主干视图时，我发现使用视图的 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 背后的要点是提供 model 和视图的强分离。 如果 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 插件中发布了解决此问题的解决方案。 欢迎您使用它。

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以获得更多文档。