收集作為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 arrray。 如果你沒有指定一個，代理不會使用哪個數組......

另一個問題是命名實例lowerCase和類UpperCase是一種慣例。 所以這是App.foo 。 此外，您應始終通過get和set訪問屬性。 這可以保證正確解析綁定。

結果如下所示，請參閱http://jsfiddle.net/pangratz666/fpqTv/ ：

把手 ：

<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');​