一起使用 ObjectController 和 ArrayController 有意义吗？答案

【问题标题】：Does it make sense to use ObjectController and ArrayController together?一起使用 ObjectController 和 ArrayController 有意义吗？
【发布时间】：2012-06-26 14:35:04
【问题描述】：

我有一个对象列表，存储在 arrayController 中并使用 #each 宏在视图上呈现

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

每个项目视图都有依赖于用户操作的类名绑定。例如：

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

isSelected取决于每个项目的状态：我必须将选定的项目存储在某个地方，如果触发点击事件，则将其与新的选定项目进行比较。

问题是：我应该在哪里计算 isSelectedproperty ？在itemsController 中？在itemController?直接在每个 itemView 中？

【问题讨论】：

标签： ember.js

【解决方案1】：

对我来说，把它放到视图中确实很有意义，而且，它确实是一个显示问题。

这里有一个例子：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();

【讨论】：

感谢这个例子。还有一个问题：我看不到 controllerobject 何时设置到 App.ItemView 中？
在示例中，它是在视图创建时设置的。在“现实生活”中，它将自动绑定到 connectOutlet。
@jrabary 我认为您在这里提到的控制器是子视图的隐式控制器。如果是这样，在这种情况下，它是从 ItemsView 继承的。
我认为该解决方案适用于所描述的用例。但是，如果出现与 select 对象相关的任何其他属性或逻辑，您应该重构以添加一个名为 itemController 或 selectedItemController 的单独 ObjectController 并使用它的 content 属性来跟踪所选项目。
完全正确。如您所见：我只想提供一个仅限于该问题的简短回答。

【解决方案2】：

听起来您需要两件事 - 项目本身（模型）上的 isSelected 属性，它回答了“这个项目是否被选中？”的问题，以及 itemsController 上的 selectedItem 属性，这回答问题“选择了哪个项目？”模型上的属性只是一个获取/设置；您可以通过过滤isSelected 为真的项目列表来计算itemsController.selectedItem，或者您可以使用一些代码显式设置它以取消选择以前未选择的项目。

【讨论】：

这是我的第一个想法，但我不想让我的模型在我的数据库中保留的属性之外的其他属性杂乱无章。因此，我想将这些属性代理到从 Ember.ObjectController 派生的 itemController。
我不介意项目上的isSelected 属性是个好主意，因为它肯定与模型属性无关，只是显示状态信息。
来自文档：“我们从控制器开始，而不是将模型对象直接暴露给您的模板，这样您就可以放置与视图相关的计算属性，并且最终不会用视图污染您的模型担忧。”