如何将属性添加到EmberJS arrayController

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的财产。