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/

中查看此内容

Answer 2

我认为没有任何超级简单的方法，我认为最好的方法是扩展LinkView，并注册一个新的帮助器，链接到引导程序，或者那些将类添加到li元素而不是anchor元素。

有一个非常好的项目已经完成了这个https://github.com/ember-addons/bootstrap-for-ember

Answer 3

没有内置方式。活动类绑定代码是链接到内部的，并涉及一些不易抽象的部分。

最佳解决方案是让路由在postsController中设置所选帖子。这看起来像是：

    setupController: function(controller, model) {
      controller.set('model', model);
      this.controllerFor('posts').set('selection', model);
    },

然后你想打开帖子的项目控制器（PostController，除非你在PostsController上将itemController设置为不同的东西）并做这样的事情：

    selection: Ember.computed.alias("parentController.selection"),
    isActive: Ember.computed.equal("model", "parentController.selection")

然后在你的李：

    <li {{bind-attr class="isActive:active :list-group-item"}}>

使<li>元素“有效”而不是<a> element</a> </li>

3 个答案: