CODEWITHSUNDEEP
ember.js
Nathan Lutterman
Nathan Lutterman

Reputation: 1885

In Ember, how would one prevent an action that belongs to an encompassing element?

I'm using Ember, and I have a box that the user can click and it will pop open a modal window with more info.

I also have a button on that box that performs a different action.

If I click on the button, the correct action is triggered, but it also triggers the action for the encompassing <div>. How do I prevent that action on the <div>, while allowing the action from the <button>?

Here's my template:

<div {{action 'openModal' 'productResultOverview' this}} class="simpleproducttile">
    <div class="row simpleproducttitle">
        <p>{{ProductId}}<i class="icon-export helpiconleft"></i><img src="img/largebox.png"></img></p>
    </div>
    <div class="row simpleproductdescription">
        <p>{{ProductDescription}}</p>
    </div>
    <div class="medium primary btn customizebutton">
        <input type="submit" {{action "sendToSavedItems"}} value="Select and Customize"/>
    </div>
</div>

Edit:

Action for the button:

App.ProductResultController = Ember.ObjectController.extend({
    actions: {
        sendToSavedItems: function() {
            console.log('sending to saved items');
        }
    }
});

And the action openModal is contained within ApplicationRoute:

App.ApplicationRoute = Ember.Route.extend({
    id: 'modal',
    actions: {
        openModal: function (modalName, model) {
            console.log('opening modal', modalName, model);
            return this.render(modalName, {
                into: 'application',
                outlet: 'modal',
                model: model
            });
        },
//....
});

Upvotes: 1

Views: 89

Answers (1)

Philippe Signoret
Philippe Signoret

Reputation: 14336

From the Ember.js docs:

By default, the {{action}} helper allows events it handles to bubble up to parent DOM nodes. If you want to stop propagation, you can disable propagation to the parent node.

What you should do is add bubbles=false to the inner items:

<input type="submit" {{action "sendToSavedItems" bubbles=false}} value="Select and Customize"/>

This should stop the click from propagating to the parent <div>.

Upvotes: 1

Related Questions