Handlebars link-to helper with Bootstrap navbar

Question

I found a post on here that said in order to use Twitter Bootstrap's navbar with Ember and Handlebars, so that the <li> gains the 'active' class automatically, I could do this:

    {{#link-to 'dashboard' tagName="li" href=false}}
        {{#link-to 'dashboard'}}
            Dashboard
        {{/link-to}}
    {{/link-to}}

It works, however, I've just enabled Ember's LOG_TRANSITIONS and it shows me that the views are getting transitioned to twice for the links in the navbar.

How do I correctly render the navbar list with Handlebars and avoid this double loading?

Answer 1

The problem is that you have two link-to's for dashboard route.

You have two options:

Use the link-to just in the li tag:

{{#link-to 'dashboard' tagName="li" href=false}}
    <a href="#">Dashboard</a>
{{/link-to}}

Use bubbles=false in the inner link-to:

{{#link-to 'dashboard' tagName="li" href=false}}
    {{#link-to 'dashboard' bubbles=false}}
        Dashboard
    {{/link-to}}
{{/link-to}}

So the event isn't propagated.