设置哪个控制器来处理某个动作

Question

我将 Ember version of the TodoMVC app 的结构用于 Ember 应用程序，我的意思是，在将应用程序路由设置为 products 之后

export default Ember.Route.extend({
    redirect: function(){
        this.transitionTo('products');
    }
});

然后我使用 todo 应用程序的ul 结构，每个产品占据一个新的列表位置（就像每个 todo 在 TodoMVC 中所做的那样）。我还（与 Todo 应用程序一样）绑定了一些属性，允许我根据状态设置 css 样式

<ul id="products">  

            {{#each product in arrangedContent }}

                <li {{bind-attr class="isEditing:editing"}}> 

根据状态，一旦用户单击按钮，产品的输入框将可见。问题在于，一旦用户单击按钮，所有产品的 isEditing 都设置为 true，因此所有输入框都是可见的，即每个列表元素的类都设置为编辑 <li class='editing'>。动作（使输入框可见）在products 控制器上处理

showInput: function(item){
    this.set('isEditing', true);
},

我只想让触发点击事件的特定产品（或列表元素）的输入框可见。在 Todo MVC 应用程序中，the action to make the input field visible 在（单个）Todo 控制器上处理，而不是 TodosController，因此在我的应用程序中，我创建了一个（单个）产品控制器并将操作放在那里，但是当用户单击按钮时列表中的单个产品，不会触发（单个）产品控制器上的操作。如何让产品控制器处理该操作，或者确保只有一个输入字段可见。

您可以通过创建一些待办事项然后单击其中一项来查看该功能在the live demo TodoMVC 应用程序上的工作方式。只有一个输入字段可见。

更新

在products控制器的showInput函数中，我尝试调用产品控制器中的相应函数（指定产品needs产品控制器后）needs: ['product'],

showInput: function(){
this.get('controllers.product').send('showInput');
}

这会调用产品控制器上的函数，但将其设置为 true 不会执行任何操作，即输入字段不可见且列表元素类均未设置为 editing <li class="">

    showInput: function(item){
      this.set('isEditing', true);      
    },

不管怎样，产品控制器没有显示在 Ember 检查器中，尽管我可以将操作发送给它，只是无法调用 this.set('isEditing',true)。

Answer 1

改变

 {{#each product in arrangedContent }}
    <li {{bind-attr class="isEditing:editing"}}> 

到

 {{#each arrangedContent as |product|}}
   {{to-do product=product}}

通过ember g component to-do 生成一个to-do 组件，并对其进行修改（见下文）。将其模板设置为之前在li 中的任何内容，通过模板中的product.<prop> 访问相应的属性。

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['isEditing'],
  isEditing: false,
  product: null,
  actions: {
    showInput: function() {
      this.setProperty('isEditing', true);
    }
  }
})