切换单个对象的视图/组件

Question

我正在尝试模仿类似于ember todo指南的内容，我可以在编辑状态之间切换，但使用组件。如果我的控制器是：

App.IndexController = Ember.ObjectController.extend({
   isEditing: true,
   actions: {
      enableEditing: function(){
         this.set('isEditing', true)
      }

   }
})

http://emberjs.jsbin.com/gosolora/1/edit

如何一次只切换模型的1个项目的编辑状态？目前，单击编辑按钮可切换模型中每个项目的编辑状态。

此外，{{if isEditing}} {{else}} {{/if}}方法有更好的替代方法吗？

Answer 1

您想要使用一个itemController，它将每个项目包装在自己的控制器中。使用数组控制器，您只需在控制器itemController上定义一个属性，并为其指定要使用的对象控制器的名称。

控制器

App.IndexController = Ember.ArrayController.extend({
  itemController: 'foo'
});

App.FooController = Em.ObjectController.extend({
  isEditing: true,

  actions: {
    enableEditing: function(){
      console.log('editing on');
      this.set('isEditing', true);
    },
    disableEditing: function(){
      console.log("editing off");
      this.set('isEditing', false);
    }
  }
});

模板

在模板内部，您将迭代控制器而不是模型

{{#each item in controller}}
  ...
{{/each}}

http://emberjs.jsbin.com/gosolora/2/edit

提示

最后一个提示，如果你的动作名称与哈希中的动作名称不匹配，Ember会对你大喊：

  

未捕捉错误：没有处理动作＆＃39; enableEdting＆＃39;。如果你这样做了   处理动作，这个错误可以通过从一个返回true来引起   控制器中的动作处理程序，导致动作冒泡。