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'}}来显示（出于各种项目的具体原因）。

我遇到的问题是，我想动态地将每个李的ID设置为＆＃34; item - id＆＃34;其中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

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

1 个答案: