Question

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

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

然后我使用todo app的ul结构，每个产品占据一个新的列表位置（就像TodoMVC中的每个todo一样）。我也（与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);
},

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

您可以通过创建一些待办事项然后点击其中一个来查看该功能如何在the live demo TodoMVC应用上运行。只有一个输入字段可见。

更新

在showInput控制器的products功能中，我尝试在产品控制器中调用相应的功能（在指定产品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}}

通过to-do生成ember g component 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);
    }
  }
})

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

1 个答案: