ember.js - EmberJS : Property Scopes in an ArrayController?

Question

这可能是一个非常简单的问题，所以如果我提前弄乱了这个论坛，我深表歉意。

我正在显示共享相同模型和 Controller 的项目列表。
我通过 <button {{ action 'edit' }}> 使这些项目可编辑在每个项目旁边切换 Controller 中属性“isEditable”的 bool 值。
但是，单击此按钮会导致列表中的所有项目都可编辑，因为它们都共享 Controller 属性“isEditable”。所需的效果是一次可编辑单个项目，而不是一次可编辑所有项目。

我的模板的简化版本如下所示:

{{#if isEditing}}
      <p>{{input type="text" value=title}}</p>
      <button {{action 'doneEditing'}}>Done</button>
{{else}}
      <span class="title">{{title}}</span>
      <button  {{action 'edit'}}><span class="edit"</span></button>
{{/if}}

Controller 看起来像这样

App.ItemController = Ember.ArrayController.extend({
isEditing : false,
actions : {
    edit : function(){
        this.set('isEditing', true);
    },
    doneEditing : function(){
        this.set('isEditing', false);
    },
}

});

有谁知道如何做到这一点？是因为每个项目都共享“isEditable”属性吗？如果是这样，我该如何解决这个问题？我不想把它放到模型中，因为它纯粹是一个展示的东西，即使我知道我可以让它工作。

谢谢:)

Answer 1

默认情况下， Controller 在 {{#each}} 中查找块将是模板的 Controller {{#each}}被使用。如果每个项目都需要由自定义 Controller 呈现(例如保持它自己的状态)，您可以提供 itemController通过查找名称引用 Controller 的选项。然后循环中的每个项目都将被包装在该 Controller 的一个实例中，并且项目本身将被设置为该 Controller 的内容属性。

因此，我假设您正在使用 {{#each}} 显示项目列表。 helper 。因此，您可以指定 itemController在 {{#each}} helper 拿着isEditable状态在每个项目的基础上。这看起来像这样:

{{#each item in controller itemController="item"}}
  ...
{{/each}}

此外，您应该定义定义的 itemController类型 Ember.ObjectController像:

App.ItemController = Ember.ObjectController.extend({
  isEditing : false,
  actions : {
    edit : function(){
      this.set('isEditing', true);
    },
    doneEditing : function(){
      this.set('isEditing', false);
    },
  }
});

对于列表，您应该有一个 App.ItemsController类型 Ember.ArrayController :

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

有关 {{#each}} 的上述 itemController 支持的更多信息，请参见此处。 helper : http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each

希望它有帮助。