javascript - 制作 元素 'active' 而不是 元素

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>标记以保持 Bootstrap 样式:

<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/