javascript - 集合作为 EmberJS 中的属性？ (一对多关系)

Question

在 EmberJS 中，我想创建一个模型，该模型的字段是其他模型的集合。我认为这将是一件容易的事情，但我无法让它发挥作用。

我当前的方法(如下面的 JSFiddle 所示)是创建两个模型(在本例中为 Foo 和 Bar )以及 Bar 的集合模型。 s(BarCollection)。然后我给出Foo一个BarCollection作为属性，然后尝试添加 Bar到集合中。这不起作用。不会引发任何错误，并且集合存在，但不会向其中添加任何元素。

http://jsfiddle.net/tbxhQ/1/

Answer 1

这是因为您尚未使用 content 属性初始化具体的 App.BarCollection 实例。这是必需的，因为 Ember.ArrayProxy 代理 content 数组。如果您不指定，则代理不会使用哪个数组...

另一个问题是，命名实例 lowerCase 和类 UpperCase 是一种约定。所以它是App.foo。此外，您应该始终通过 get 和 set 访问属性。这保证了正确解析绑定(bind)。

结果如下所示，参见 http://jsfiddle.net/pangratz666/fpqTv/ :

Handlebars :

<script type="text/x-handlebars">
    All the bars from {{App.foo.name}}:
    <ul>
        {{#each App.foo.bars }}
            <li>{{this.name}}</li>
        {{/each}}
    </ul>
</script>

​JavaScript:

App = Ember.Application.create();
App.Bar = Ember.Object.extend();

App.BarCollection = Ember.ArrayProxy.extend();

App.foo = Ember.Object.create({
    name: 'Fred',
    bars: App.BarCollection.create({
        content: []
    })
});

App.getPath('foo.bars').pushObject(App.Bar.create({
    name: 'bob'
}));​

<小时/>

请注意:在您的情况下，不需要为 bars 属性使用 ArrayProxy 。一个简单的 JavaScript 数组也可以完成这项工作。因此，这将是我对您发布的示例的最终建议，请参阅 http://jsfiddle.net/pangratz666/CHHXb/ :

JavaScript:

App = Ember.Application.create();
App.Bar = Ember.Object.extend();

App.foo = Ember.Object.create({
    name: 'Fred',
    bars: [],
    addToBars: function(name) {
        this.get('bars').pushObject(App.Bar.create({
            name: name
        }));
    }
});

App.get('foo').addToBars('bob');​