javascript - backbone.js 构造嵌套 View 和模型

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 之类的属性(这将是 sibling /堂 sibling )？

Q2:作为Q1的进一步扩展，funcB1是否可以访问与ViewA关联的DOM元素？ (在这个例子中，#new div？)

问题 3:一般来说，我如何定义如上所述的 View 和模型之间的关联，以便一切都正确地联系在一起？

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

Answer 1

为了能够访问相关模型的属性，该模型必须具有某种关于它与哪些模型相关的知识。 Backbone.js 不会隐式处理关系或嵌套，这意味着您必须自己确保模型相互了解。要回答您的问题，一种方法是确保每个子模型都有一个“父”属性。通过这种方式，您可以首先向上遍历嵌套到父级，然后向下遍历到您知道的任何 sibling 。

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

关于您的 View ，在进行嵌套主干 View 时，我发现使用 View 的 tagName 选项让每个 View 代表一个 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();
    }

});

然后在您的应用程序初始化代码中(例如在您的 Controller 中)，我会启动 ViewA 并将其元素放在 body 元素中。