集合作爲EmberJS中的一個屬性？ （一對多關係）

Question

在EmberJS中，我想創建一個模型，該模型具有一個其他模型集合的字段。我認爲這將是一件容易的事情，但我無法讓它工作。

我目前的做法，如下面的jsfiddle證明，是創建兩個模型（在這種情況下Foo和Bar）和Bar S（BarCollection）的集合模型。然後，我將Foo a 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');​