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，它回答了“哪个项目被选中？”这个问题。模型上的属性只是一个获取/设置；您可以itemsController.selectedItem通过过滤项目列表来计算其中一个isSelected为真的项目，或者您可以使用一些代码明确设置它以取消选择以前未选择的项目。

于 2012-06-26T14:55:43.740 回答