EmberJS：ArrayController 中的属性范围？

Question

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

我正在显示共享相同模型和控制器的项目列表。 我通过每个项目旁边的<button {{ action 'edit' }}> 使这些项目可编辑，该项目在控制器中切换属性“isEditable”的布尔值。 但是，单击此按钮会导致列表中的所有项目变为可编辑，因为它们都共享控制器属性“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}}

控制器看起来像这样

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

});

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

谢谢:)

Answer 1

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

所以，我假设您正在使用 {{#each}} 帮助器显示项目列表。因此，您可以在 {{#each}} 帮助器中指定 itemController 以在每个项目的基础上保持 isEditable 状态。这看起来像这样：

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

此外，您应该定义类型为Ember.ObjectController 的已定义itemController，例如：

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 支持的更多信息：http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each

希望对你有帮助。