Ember nested link-to doesn't work

Question

I am trying to make menu with submenus, but no luck:

<ul class="side-menu">
    {{#link-to 'reportSummary' tagName="li" href=false}}<a href="#"><span class="badge pull-right">17</span> <i class="icon-dashboard"></i>Рабочий стол</a>{{/link-to}}
    {{#link-to 'remarkList' tagName="li" href=false}}
        <a href="#"><span class="badge pull-right">17</span> <i class="icon-bar-chart"></i>Замечания</a>
        <ul class="sub-menu">
            {{#link-to 'remarkState' 'review' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Исполнение</a>{{/link-to}}
            {{#link-to 'remarkState' 'approval' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Утверждение</a>{{/link-to}}
            {{#link-to 'remarkState' 'worker' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Объяснительная</a>{{/link-to}}
            {{#link-to 'remarkState' 'info' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Информация</a>{{/link-to}}
            {{#link-to 'myRemarks' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Мои замечания</a>{{/link-to}}
        </ul>
    {{/link-to}}
    {{#link-to 'refusalList' tagName="li" href=false}}<a href="#"><span class="badge pull-right">17</span> <i class="icon-terminal"></i>Отказы</a>{{/link-to}}
    {{#link-to 'complaintList' tagName="li" href=false}}<a href="#"><span class="badge pull-right">17</span> <i class="icon-th"></i>Жалобы</a>{{/link-to}}
</ul>

When i click nested link-to it does not work at all, no events. What is wrong?

Answer 1

Don't nest your link-to's. the link-to helper is using a special view, LinkView, and uses it's click event to invoke the transition. When you nest two such views, the click event bubbles through both, making the outer view event - which is called last - the significant one.

Instead, you should do something like:

                    {{#link-to 'remarkList' tagName="li" href=false}}
                        <a href="#"><span class="badge pull-right">17</span> <i class="icon-bar-chart"></i>Замечания</a>
                    {{/link-to}}
                    <ul class="sub-menu">
                        {{#link-to 'remarkState' 'review' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Исполнение</a>{{/link-to}}
                        {{#link-to 'remarkState' 'approval' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Утверждение</a>{{/link-to}}
                        {{#link-to 'remarkState' 'worker' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Объяснительная</a>{{/link-to}}
                        {{#link-to 'remarkState' 'info' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Информация</a>{{/link-to}}
                        {{#link-to 'myRemarks' tagName="li" href=false}}<a href="#"><i class="icon-angle-right"></i>Мои замечания</a>{{/link-to}}
                    </ul>

putting each link-to to a specific element.