如何构建嵌套的模型和视图?

时间:2012-06-04 21:03:03

标签: javascript backbone.js

使用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

我仍在处理这些观点,但主要观点是观点应以类似的方式构建。 (集合视图包含多个视图A,其中包含多个视图B)。多个ViewB之间永远不会共享相同的ModelB。

Q1:设计是否有意义,还是我应该考虑的明显缺陷? (这是我第一次使用BackboneJs)。

Q2:设置" Node"的最佳方式是什么?现在我正在使用ModelBs数组。是否可以在每个ModelA上拥有ModelB的集合?哪种方法更好?

任何指导方针都适用!

我还想指出,我已在相关问题上阅读this优秀帖子(推荐)。但是,这个案例在数组/集合中没有包含ModelB,就像这个一样。

1 个答案:

答案 0 :(得分:2)

Q1:设计是否有意义,还是我应该考虑的明显缺陷? 设计假设:集合A有很多模型,模型A有模型B的集合,每个模型B都有它自己的视图B.

Q2:每个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都将具有可通过ModelA属性modelBs引用的模型B集合。或者你指定的任何键。

以下是实例化ModelA的样子。

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

我已经实例化了ModelA,并且设置了你可能已经定义的其他属性,我还设置了ModelA的属性modelBs的值。这是与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

它还有助于绑定以及在模型中的模型中具有模型时支持的一些其他问题。关系适用于一对一,一对多和反向关系。有许多对应的解决方法,但我不认为这是常见的,因为对于设置方式来说这是一个困难的命题。

至于观点,我不确定你在想什么,但是你需要有一个“收集”的观点吗?

假设您拥有ModelA,其中包含ModelBs的集合。每个ModelB都有一个关联的视图。这与老式LIST的概念非常吻合。

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

虽然有很多ModelB,但你已经在它们的集合中保持了它们的整洁。如果使用数据驱动的方式管理视图,则无需将视图对象放在另一个列表中。相反,你可以让他们自我管理!

// 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关联的视图。

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