在Ember.js中动态设置元素ID

Question

我有一个项目列表,我正在从FIXTURES数据存储加载:

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的例子