使<li>元素'有效'而不是<a>元素

Question

我有一个使用Bootstrap和Ember.js的无序列表.每个列表项都是显示新帖子的链接,每当您单击链接时,Ember active默认会添加该类.我正在使用Bootstrap nav-pills,当课程变成蓝色时变成蓝色active.然而,Ember建立了链接,active而我希望它能让整个<li>活动变得活跃.

这是我的模板:

<ul class="nav nav-pills nav-stacked">
    {{#each post in controller}}
        <li class="list-group-item">
            {{#link-to 'post' post}}
                {{post.title}}
            {{/link-to}}
        </li>
    {{/each}}
</ul>

当您单击链接时,<li>看起来像这样:

<li class="list-group-item">
    <a id="ember360" class="ember-view active" href="#/posts/1">
        A great post
    </a>
</li>

我知道用jQuery添加这个功能是相当简单的,但是有没有办法让<li>主动而不是<a>直接使用Ember或Handlebars？我试着把{{link-to}}周围的东西放在那里<li>,但没有做到这一点.

Answer 1

您可以将link-to生成的标记更改为<li>使用tagName="li"选项.并保持<a>标记只保持引导样式:

<ul class="nav nav-pills nav-stacked">
    {{#each post in controller}}        
          {{#link-to 'post' post tagName="li" class="list-group-item" }}
              <a href="#">{{post.title}}</a>
          {{/link-to}}   
    {{/each}}
  </ul>

在行动中查看此内容http://jsfiddle.net/marciojunior/YLN5X/