在Ember.js

Question

動態設置元素的id我有我從興業數據存儲加載項的列表：

App.ItemsController = Ember.ArrayController.extend({ 
    content: function() { 
     return App.Item.find(); 
    }.property('content') 
}); 

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

App.Item.FIXTURES = [ 
    {id: 1, name: 'Item 1'}, 
    {id: 2, name: 'Item 2'}, 
    {id: 3, name: 'Item 3'}, 
    {id: 4, name: 'Item 4'}, 
    {id: 5, name: 'Item 5'}, 
    {id: 6, name: 'Item 6'}, 
    {id: 7, name: 'Item 7'}, 
    {id: 8, name: 'Item 8'}, 
    {id: 9, name: 'Item 9'}, 
    {id: 10, name: 'Item 10'} 
]; 

，我有一個簡單的模板，它

<script type="text/x-handlebars" data-template-name="items"> 
    <ul> 
    {{#each item in content}} 
     <li {{bindAttr id="elementId"}} > {{item.name}}</li> 
    {{/each}} 
    </ul> 
</script> 

我正在使用{{render 'items'}}來顯示（針對各種項目特定的原因）。

我遇到的問題是，我想動態設置每個li的id爲「item-id」，其中id是模型中項目的id。我已經嘗試了所有可以考慮設置elementId的計算屬性組合，但是我無法使其運行。

有沒有辦法做到這一點？任何幫助將非常感激。謝謝。

Answer 1

您可以在模型中設置一個計算屬性，然後在bindAttr幫助程序中使用該屬性。

App.Item = DS.Model.extend({ 
    name: DS.attr('string'), 
    elementId: function() { 
    return "item-" + this.get('id'); 
    }.property('id') 
}); 

車把：

<script type="text/x-handlebars" data-template-name="items"> 
    <ul> 
    {{#each item in content}} 
     <li {{bindAttr id="item.elementId"}} > {{item.name}}</li> 
    {{/each}} 
    </ul> 
</script> 

JSBin example