setting which controller to handle a certain action

问题

I'm using the structure of the Ember version of the TodoMVC app for an Ember app by which I mean that, after setting the application route to products

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

I then use the ul structure of the todo app, with each product occupying a new list position (as each todo does in the TodoMVC). I also (as with the Todo app) bind some attributes that allow me to set css styles depending on state

<ul id="products">  

            {{#each product in arrangedContent }}

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

Depending on state, an input box will be visible for a product once a user clicks a button. The problem is that once the user clicks the button, isEditing is set to true for all the products, so all the input boxes are visible i.e. the class for each list element is set to editing <li class='editing'>. The action (which makes the input box visible) is handled on the products controller

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

I only want the input box made visible for the particular product (or list element) where the click event was triggered. In the Todo MVC app, the action to make the input field visible is handled on a (singular) Todo controller, not the TodosController, so in my app, I created a (singular) product controller and put the action there but when the user clicks the button on an individual product in the list, the action on the (single) product controller is not triggered. How can I get the product controller to handle the action, or alternatively, ensure that only one input field is made visible.

You can see how the functionality is supposed to work on the live demo the TodoMVC app by creating a few todo items and then clicking on one of them. Only one input field becomes visible.

Update

In the showInput function of the products controller, I tried to call the corresponding function in the product controller (after specifying the products needs the product controller) needs: ['product'],

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

this call the function on the product controller but setting it to true does nothing, i.e the input field isn't made visible and none of the list element classes are set to editing <li class="">

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

For what it's worth, the product controller isn't showing in the Ember inspector, although I am able to send the actions to it, just not able to call this.set('isEditing',true) on it.

回答1:

Change

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

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

Generate a to-do component via ember g component to-do, and modify it (see below). Set it's template to be whatever went in the li before, accessing the appropriate property via product.<prop> in the template.

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

来源：https://stackoverflow.com/questions/31091145/setting-which-controller-to-handle-a-certain-action

标签

ember.js