1

オブジェクトのリストがあり、arrayControllerに格納され、#eachマクロを使用してビューにレンダリングされます

{{#each item in controller}}
  {{view App.ItemView}}
{{/each}}

各アイテムビューには、ユーザーアクションに依存するクラス名バインディングがあります。例えば ​​:

App.ItemView = Ember.View.extend {
  classNameBindings: ['isSelected:selected']
}

isSelected各アイテムの状態によって異なります。選択したアイテムをどこかに保存し、クリックイベントがトリガーされた場合は、新しく選択したアイテムと比較する必要があります。

isSelected問題は、このプロパティをどこで計算する必要があるかということです。itemsController?_ itemController?_ 各itemViewで直接?

4

2 に答える 2

3

私にとっては、それをビューに入れることは理にかなっています。さらに、それは実際には表示の問題でもあるからです。

ここに例があります:http://jsfiddle.net/MikeAski/r6xcA/

ハンドルバー:

<script type="text/x-handlebars" data-template-name="items">
    {{#each item in controller}}
        {{view App.ItemView contentBinding="item"}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="item">
    Item: {{item.label}}
</script>

JavaScript :

App.ItemsController = Ember.ArrayController.extend({
    selected: null
});

App.ItemsView = Ember.View.extend({
    templateName: 'items'
});

App.ItemView = Ember.View.extend({
    templateName: 'item',
    classNameBindings: ['isSelected:selected'],

    isSelected: function() {
        var item = this.get('content'),
            selected = this.getPath('controller.selected');
        return item === selected;
    }.property('item', 'controller.selected'),

    click: function() {
        var controller = this.get('controller'),
            item = this.get('content');
        controller.set('selected', item);
    }
});

App.ItemsView.create({
    controller: App.ItemsController.create({
        content: [{ label: 'My first item' },
                  { label: 'My second item' },
                  { label: 'My third item' }]
    })
}).append();
​
于 2012-06-26T15:00:56.407 に答える
0

isSelected「このアイテムは選択されていますか?」という質問に答えるアイテム自体 (モデル) のselectedItemプロパティとitemsController、「どのアイテムが選択されていますか?」という質問に答える のプロパティの 2 つが必要なようです。モデルのプロパティは単なる get/set です。itemsController.selectedItemtrueの項目のリストをフィルタリングして計算するisSelectedか、コードを使用して明示的に設定して、以前に選択されていなかった項目を選択解除することができます。

于 2012-06-26T14:55:43.740 に答える