Ember.js：如何渲染的hasMany關係與所有可能的值

Question

沿着這是我的模型的一部分：

App.Cheese = DS.Model.extend({ 
    name: DS.attr('string'), 
    category: DS.attr('string'), 
    flavors: DS.hasMany('flavor', { async: true }) 
}); 

App.Flavor = DS.Model.extend({ 
    name: DS.attr('string') 
}); 

當顯示奶酪，所有現有flavor的名單應顯示爲按鈕。 如果正在顯示的奶酪已具有特定味道，相關按鈕的顏色應該反映出來。 點擊一個按鈕應該添加/刪除當前的奶酪和點擊按鈕下面的味道之間的關聯。

在顯示奶酪的模板，我們將有：

Name: {{name}} 
Flavors: 
{{#each flavor in allFavors}} 
    <button class="(depends on whether the cheese has this flavor)">{{flavor.name}}</button> 
{{/each}} 
</code> 
</pre> 

此外，每個按鈕將被綁定到奶酪和基礎味的模型的關係，所以，當用戶點擊，模型得到更新，反之亦然。

什麼將是一個令人滿意的方式來處理在Ember這個？

Answer 1

這是我想出的一個解決方案，我很樂意接受評論。

觀察結果是，我將上述關係比作矩陣。 事實上，對於每一種奶酪來說，都有一組可能的數值，並且對於每一種奶酪 - 口味關係來說，這兩者之間是否有關係是布爾語。

存儲意味着「沒有關係」的關係是值得懷疑的，這就是爲什麼我覺得這個解決方案遠非完美。 但至少它可以讓我讓Ember輕鬆展示關係，讓Ember雙向綁定模板和模型。

這裏是新的代碼，以便更好地理解這個問題：

App.Cheese = DS.Model.extend({ 
    name: DS.attr('string'), 
    category: DS.attr('string'), 
    flavors: DS.hasMany('cheeseFlavor', { async: true }) 
}); 

App.CheeseFlavor = DS.Model.extend({ 
    cheese: DS.belongsTo('cheese'), 
    flavor: DS.belongsTo('flavor'), 
    doesHave: DS.attr('boolean') 
}); 

App.Flavor = DS.Model.extend({ 
    name: DS.attr('string') 
}); 

App.Cheese.reopenClass({ 
    FIXTURES: [ 
     {id: 1, name: 'Cheddar', category: 'cat1', flavors: [1, 2, 3]}, 
     {id: 2, name: 'Blue Cheese', category: 'cat6', flavors: [4, 5, 6]}, 
    ] 
}); 

App.CheeseFlavor.reopenClass({ 
    FIXTURES: [ 
     {id: 1, cheese: 1, flavor: 1, doesHave: true}, 
     {id: 2, cheese: 1, flavor: 2, doesHave: false}, 
     {id: 3, cheese: 1, flavor: 3, doesHave: true}, 
     {id: 4, cheese: 2, flavor: 1, doesHave: false}, 
     {id: 5, cheese: 2, flavor: 2, doesHave: false}, 
     {id: 6, cheese: 2, flavor: 3, doesHave: true} 
    ] 
}); 

App.Flavor.reopenClass({ 
    FIXTURES: [ 
     {id: 1, name: 'Flavor 1'}, 
     {id: 2, name: 'Flavor 2'}, 
     {id: 3, name: 'Flavor 3'} 
    ] 
});