1

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私が抱えている問題は、各liのIDを「item- 」に動的に設定したいということです。ここidで、モデル内のアイテムのIDです。elementId を設定するために考えられる計算されたプロパティのすべての組み合わせを試しましたが、うまくいきません。

これを行う方法はありますか？どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

5

モデルで計算されたプロパティを設定し、それを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 の例

于 2013-04-19T02:23:12.720 に答える