在活动 {{linkTo}} 周围创建一个 <li class="active">答案

【问题标题】：Create a <li class="active"> around an active {{linkTo}}在活动 {{linkTo}} 周围创建一个 <li class="active">
【发布时间】：2013-05-05 01:22:59
【问题描述】：

在以下 Ember 应用中为活动页面获取 <li class="active"> 的最简单方法是什么？

index.html

<script type="text/x-handlebars">
  <ul class="nav">
    <li>{{#linkTo 'ping'}}Ping{{/linkTo}}</li>
    <li>{{#linkTo 'pong'}}Pong{{/linkTo}}</li>
  </ul>
</script>

app.js

App = Ember.Application.create()

App.Router.map(function() {
  this.route("ping", { path: "/ping" });
  this.route("pong", { path: "/pong" });
});

【问题讨论】：

相关：stackoverflow.com/q/14412073/923560

标签： ember.js

【解决方案1】：

这个解决方法对我有用：

{{#linkTo  'menus.search' tagName='li' href=false}}
    {{#linkTo 'menus.search'}}
        <i class="icon-search"></i>
    {{/linkTo}}
{{/linkTo}}

它创建一个包含锚元素的 li 元素。当路由处于活动状态时，两者都将使用“活动”类进行更新。

【讨论】：

非常适合引导选项卡。谢谢！

【解决方案2】：

在您的模板中替换 li 标记，如下所示：

index.html

<script type="text/x-handlebars">
  <ul class="nav">
    {{#linkTo 'ping' tagName="li"}}Ping{{/linkTo}}
    {{#linkTo 'pong' tagName="li"}}Pong{{/linkTo}}
  </ul>
</script>

当应用程序的当前路由与提供的路由名称匹配时，带有指定 tagName 的 {{linkTo}} 将自动应用 css 类名称“active”。

例如，当您的应用网址位于 /#/ping 时，生成的标记将类似于：

 ...
 <li class="active">Ping</li>
 ...

或者您创建自定义视图

App.ItemView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});

然后像这样使用它

 <script type="text/x-handlebars">
   <ul class="nav">
   {{#view App.ItemView}}
     {{#linkTo 'ping'}}Ping{{/linkTo}}
   {{/view}}
   {{#view App.ItemView}}
     {{#linkTo 'pong'}}Pong{{/linkTo}}
   {{/view}}
   </ul>
 </script>

一些 CSS 来查看它的实际工作情况

li a {
  color: #000; 
}
li a.active {
  color: #f00;
}

希望对你有帮助

【讨论】：

我希望通过 <li> 元素中的“简单”bindattr 来解决这个问题。对于这么简单的事情，它似乎有很多代码。
tagName 属性是您真正需要的。不需要创建自定义视图。
@MehulKar 我已经提到了这一点，因此我的答案中有两个选项:) 但你是对的，第一个解决方案更容易
是的 :) 我只是在重申@wintermeyer 的评论。
@MehulKar tagName 对我没有帮助。我需要在<li> 中有一个<a>，并且我需要<li> 与class='active' 一起使用。另外，我无法更改 CSS。

【解决方案3】：

只需将{{link-to}} 与tagName 嵌套在外部即可。这将在外部<li> 和内部<a> 标记上设置一个活动类。

{{#link-to "ping" tagName="li"}}
    {{#link-to "ping"}}ping{{/link-to}}
{{/link-to}}

{{#link-to "pong" tagName="li"}}
    {{#link-to "pong"}}pong{{/link-to}}
{{/link-to}}

【讨论】：