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选项，该选项通过查找名称引用控制器。然后循环中的每个项目都将包装在此控制器的实例中，并且项目本身将设置为该控制器的content属性。

因此，我假设您正在使用{{#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

希望它有所帮助。

EmberJS：ArrayController中的属性范围？

1 个答案: