ember.js - 如何将属性添加到 EmberJS 数组控制器

Question

如何为 arrayController 中的每个项目添加控制器属性？

例如，如果我将属性命名为“isExpanded”，我希望能够在模板中执行以下操作：

{{#each controller}}
    {{#if isExpanded}}
        expanded content
    {{else}}
        non-expanded content
    {{/if}}
{{/each}}

请注意，我不能在实际应用程序中使用 ObjectController；请在下面的 Kingpin2 回复后查看我的评论。

Answer 1

使用项目控制器，并将属性添加到项目控制器。它是一个控制器，将用于控制器列表中的每个项目。

App.ColorsController = Em.ArrayController.extend({
  itemController: 'color'
});

App.ColorController = Em.ObjectController.extend({
  isExpanded: false
});

http://emberjs.jsbin.com/iSaJELug/2/edit

如果您在谈论 isExpanded 的 arraycontroller 范围，那么它同样简单：

http://emberjs.jsbin.com/iSaJELug/3/edit

{{#each item in controller}}
  {{#if controller.isExpanded}}
    <li>Color: {{item.color}} and Class: {{item.class}}</li>
  {{else}}
    <li>Color: {{item.color}}</li>
  {{/if}}
{{/each}}

App.IndexController = Em.ArrayController.extend({
  isExpanded: false,
});

最后一点，当您只是说{{each controller}}您正在将范围从控制器范围内更改为范围内的项目时，如果您想访问控制器属性，则需要使用controller.isExpanded.