ember.js - 在 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 示例