2

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

我正在显示共享相同模型和控制器的项目列表。我通过<button {{ action 'edit' }}>每个项目旁边的 a 使这些项目可编辑，该项目在控制器中切换属性“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”属性吗？如果是这样，我该如何解决这个问题？我不想把它放到模型中，因为它纯粹是一个展示的东西，即使我知道我可以让它工作。

谢谢 ：）

4

1 回答 1

3

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

因此，我假设您正在使用{{#each}}帮助程序显示项目列表。itemController因此，您可以在帮助程序中指定一个{{#each}}来保存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 支持的更多信息，请参见此处： http ://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each

希望能帮助到你。

于 2013-09-21T23:13:58.413 回答