javascript - 如何构建嵌套模型和 View ？

Question

使用backbone.js:

我有一组 ModelA，其中包含多个属性，还有一个“节点”，其中包含多个 ModelB。 ModelB 还包含几个属性。

CollectionA

 ModelA
  Attribute 1
  .
  .
  Attribute n
  "Node"
     ModelB
       Attribute 1
       Attribute 2
     ModelB
       Attribute 1
       Attribute 2

 ModelA
  Attribute 1
  .
  .
  Attribute n
  "Node"
     ModelB
       Attribute 1
       Attribute 2
     ModelB
       Attribute 1
       Attribute 2

我仍在研究 View ，但主要思想是 View 应该以类似的方式构建。 (Collection View 拥有多个 View A，而 View A 又拥有多个 View B)。同一个 ModelB 永远不会在多个 ViewB 之间共享。

问题1:这个设计是否有意义，或者是否有我应该考虑的明显缺陷？ (这是我第一次尝试 BackboneJs)。

问题2:设置“节点”的最佳方式是什么？现在我正在使用一系列 ModelB。是否可以在每个 ModelA 上拥有 ModelB 的集合？哪种方法更好？

任何指南均适用!

我还想指出，我已阅读 this关于相关问题的优秀帖子(推荐)。然而，该案例并未像本案例那样在数组/集合中包含 ModelB。

Answer 1

问题1:这个设计是否有意义，或者是否有我应该考虑的明显缺陷？ 设计假设:集合A有许多模型A，模型A有模型B的集合，每个模型B有它自己的 View B。

问题2:每个ModelA上可以有一个ModelB集合吗？

答案:可行。

模型中“包含”一堆相关的子模型是相当常见的。您绝对可以通过创建(就像您提到的)一个数组、一个对象、一个集合来保存这些模型 B(让我们称之为容器)来实现这一点。基本方法就是创建容器，然后实例化新模型并将它们插入。很可能您希望这些模型 B 中对相关父模型 A 进行某种引用，以便稍后可以返回到该状态。就像每个模型 B 都有一个 ModelA_ID 作为属性。

这可能是 Paul Uithol 的 Backbone-Relational 的一个很好的用途。 .

使用 Backbone-Relational，您可以设置模型(类)并以具有模型 B 集合的方式定义它。代码如下所示。

ModelA = Backbone.RelationalModel.extend({
    relations: [{
        type: Backbone.HasMany,
        key: 'modelBs',
        relatedModel: 'ModelB',
        collectionType: 'ModelBCollection',
        reverseRelation: {
            key: 'parentA'
        }
    }],
    defaults: ...,
    initialize: ...,
    etc. ... // Other instance properties and functions of model.
});

当您执行此操作时，您实例化的每个模型 A 都会有一个模型 B 的集合，可以通过 ModelA 属性 modelBs 引用这些模型 B。或您指定的任何键。

这是实例化 ModelA 的样子。

myModelA = new ModelA({
    // Setting up ModelA attributes...
    'modelBs': [1, 3, 7]
});

我已经实例化了 ModelA，并设置了您可能已定义的其他属性，我还设置了 ModelA 的属性 modelB 的值。这是与 ModelA 相关的每个 ModelB 的 id 数组。这就是您的集合如何知道哪些 ModelB 与此 ModelA 关联的方式。

myModelA.fetchRelated('modelBs');

您的 .fetchRelated() 调用向服务器发送请求，以使用 ModelB 1、3 和 7 填充 modelBs 集合。

当您想要访问 ModelA 中的 ModelB 集合时，您只需执行以下操作即可。

myModelA.get('modelBs');

这将返回与 ModelA 相关的 ModelB 集合，假设您已获取相关模型并且该集合中包含 ModelB。

Backbone-Relational 的好处在于，它可以在父模型实例化时轻松自动建立这些已定义的关系。它还创建了反向关系，因此从父级到子级、从子级到父级的上下遍历很容易。

如果我正在操作 ModelB 并想要访问 ModelA，我会使用我建立的 parentA 的反向关系键。

someModelB.get('parentA');    // Points to the related ModelA

它还有助于解决当模型中的模型中的模型时出现的绑定(bind)和其他一些问题。关系适用于一对一、一对多和逆关系。有一个多对多的解决方法，但我认为这并不常见，因为就事物的设置方式而言，这是一个困难的提议。

至于观点，我不确定你到底在想什么，但你需要有一个观点的“集合”吗？

假设您有 ModelA 和 ModelB 集合。每个 ModelB 都有一个关联的 View 。老式列表的概念很好地说明了这一点。

<div id="ModelAView">
    <ul>
        <li>ModelB_1</li>
        <li>ModelB_3</li>
        <li>ModelB_7</li>
    </ul>
</div>

虽然有很多 ModelB，但您已经将它们整齐地放在一个集合中。如果您采用数据驱动的方式来管理 View ，则无需将 View 对象放在另一个列表中。相反，您可以让它们 self 管理!

// Assume when you instantiate ViewB, you pass to it a ModelB.

ViewB = Backbone.View.extend({
    initialize: function() {
        this.model.bind('remove', this.remove, this);
        this.model.bind('update:colorAttr', this.updateColor, this);
    },
    updateColor: function() {
        this.$el.css('color', this.model.colorAttr);
    }
});

现在假设您从收藏中删除了 ModelB。

myModelA.get('modelBs').remove(someModelB);

然后与此 modelB 关联的 View 将自动从 View 中删除。

不确定这是否是您的想法。我通常采用这种方法。无论如何，如果有更多细节，请在评论中发布。希望这会有所帮助。