samedi 27 juin 2015

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 products }}

                <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. 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 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.




Aucun commentaire:

Enregistrer un commentaire