FEATURES : option to cancel bubbling clicks on link-to, option to specify a non 'link-to' element points to/belongs with a route


#1

###Use Case: nested Links (they happen)

Sometimes when building navigation menus you want a hover state for a quick option select but also want the user to be able to just click the main button itself. This leads to nested links, and currently best way I’ve found to make this work in Ember while still utilizing Ember’s awesome feature that adds an ‘active’ class to all links pointing at the current route is thus:

Extend the router with an action specifically for ignoring a click

App.ApplicationRoute = Ember.Route.extend({
  actions : {
    silenceClick        :   function(){ ;/* do nothing*/}
  }
});

Add a click silencer one DOM element above the nested link

{{#link-to "route" tagName='div'}}
  <ul>
    <li {{action "silenceClick" bubbles=false}}>
      {{#link-to "route.sub"}}My Sub Route{{/link-to}}
    </li>
  </ul>
{{/link-to}}

It would be really awesome if there were two additional ways to accomplish this.

Feature idea 1

bubbles=false option on link-to

{{#link-to "outerRoute" tagName='div'}} My link
  {{#link-to "innerRoute" bubbles=false}}Inner Link{{/link-to}}
{{/link-to}}

Feature idea 2

{{action "myRoute" route=myRoute}}

Often I’ve found myself in situations where I need to do a little logic before I transition from one route to the next, so instead of using a link-to I use action and then transitionTo once I’ve done what it was I needed to do (stash updates, or in my current project route tracking). The downside to doing this is that what is otherwise from the user’s perspective just a link to another route no longer get to make use of ember’s “active” class on links for the current route. Adding route=MyRoute would be a way for ember to know that this element should also be given an active class when the route matches.