ember.js - 创建一个围绕一个活跃的 {{linkTo}}

Question

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

索引.html

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

应用程序.js

App = Ember.Application.create()

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

Answer 1

这个解决方法为我做了：

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

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

Answer 2

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

索引.html

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

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

例如，当您的应用程序 url 位于/#/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;
}

希望能帮助到你

Answer 3

{{link-to}}只需将a嵌套在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}}