Ember prevent nested actions to be called

If you have an element that is affected by multiple actions you can use bubbles=false to prevent that action to bubble up to the next on the hierarchy.

<div class="container-fluid" {{action 'hideNav'}}>
  <div class="navbar-header">
    <button {{action 'toggleNav' bubbles=false}} type="button" class="navbar-toggle collapsed" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    {{link-to name 'index' class="navbar-brand"}}
  </div>

  <div class="collapse navbar-collapse">
    {{yield}}
  </div>
</div>

Tweet