创建< li class =“active”>围绕活跃的{{linkTo}} [英] Create a <li class="active"> around an active {{linkTo}}

问题描述

$ b $在$ Em $应用程序中为活动页面获取< li class =active> 最干净的方法是什么？ b

index.html

 < script type =text /的x车把> 
< ul class =nav> 
< li> {{＃linkTo'ping'}} Ping {{/ linkTo}}< / li> 
< li> {{link to'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}）; 
}）; 
  

解决方案

在模板中替换 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> 
  

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

示例，当您的应用程序URL位于 /＃/ ping 生成的标记将是这样的：

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

或者您创建自定义视图 / p>

  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}} 
 {{linklink'Ping'}} Ping {{/ linkTo}} 
 {{/ view}} 
 {{＃查看App.ItemView}} 
 {{linklink'pong'}} Pong {{/ linkTo}} 
 {{/ view}} 
< / ul> 
< / script> 
  

一些css看到它实际工作

  li a {
 color：＃000; 
} 
 li a.active {
 color：＃f00; 
} 
  

希望它有助于

What is the cleanest way to get <li class="active"> for the active page in the following Ember app?

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" });
});

解决方案

replace in your template the li tags like so:

index.html

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

the {{linkTo}} with the tagName specified will apply a css class name of 'active' automatically when the application's current route matches the supplied route name.

example, when your app url is at /#/ping the resulting markup would be something like:

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

Or you create a custom view

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

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

and then use it like so

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

some css to see it actually working

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

hope it helps

这篇关于创建< li class =“active”>围绕活跃的{{linkTo}}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！