Nested links in templates through {{#link-to}} helper

1

I would like to have two links nested in each other in the template. My use case is this

{{link-to "conversation"}}
<li>
    Conversastion Data
    {{link-to "channel"}}Channel{{/link-to}}
</li>
{{/link-to}}

For some reason ember closes the parent link before the beginning of the <li>. Is this kind of nesting possible in Ember ?

2

I ran across the same issue with Bootstrap navigation. It seemed rather kludgy to use the doubled link method.

Although I cannot recall where I found this, here is a solution for getting the active status of the parent element, but setting up the link correctly. Obviously the link-to target route needs to be changed, but the bind-attr href should be left as is.

{{#link-to "reach.index" tagName="li" href=false}}
  <a {{bind-attr href="view.href"}}>
    Overview
  </a>
{{/link-to}}

The other issue I ran across is I want the entire parent li block to have a finger pointer when moused over, for the entire block to appear to the end user as a link. To get this behavior, add this to your css.

.navbar-nav > li > a {
    cursor: pointer;
}

Ideally I should build a handlebars helper or component to take care of this, but I have yet to actually learn how to do this. Right now I just keep this as a Gist where I can quickly copy and paste it into my projects.

Hopefully this saves you the day of consternation I endured to figure this out!