ember.jsember-clihtmlbars

How to stop the inner action from bubbling to the outer link-to helper?

When clicking the "edit" to trigger the action "edit":

  {{#link-to "pages.show" page class="list-group-item"}}
    {{page.name}}
    <span class="badge" {{action "edit" page preventDefault=false}}>edit</span>
  {{/link-to}}

Then the action is triggered (e.g. the edit page is opened), but in the next second the link-to redirect is done so I end up on the "pages.show" route.

Expected: Solely the action "edit" is invoked and the click event(?) is not "bubbled" to the link-to helper.

Side notes Ember 2.2 is used and the template above is part of a component.

PS: I red that using preventDefault=false inside an action would stop this type of behavior - but obviously the link-to helper gets the information from somewhere else.

Solution

  • What you need is called event bubbling. You can disable it by using bubbles=false inside your action helper, so your click event won't bubble up to the link-to element

    {{#link-to "pages.show" page class="list-group-item"}}
  {{page.name}}
  <span class="badge" {{action "edit" page bubbles=false}}>edit</span>
{{/link-to}}

    http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_event-propagation

    preventDefault is a different thing, when setting preventDefault to false, you allow the default browser action of the DOM event.