Question

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

Answer 1

这个解决方法是为我做的：

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

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

Answer 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;
}

希望有所帮助

Answer 3

只需将@RequestMapping(value = "/stockgoogle/", method = RequestMethod.GET) public @ResponseBody Stock stockGoogle(Locale locale, Model model) { StockDaoImpl si = new StockDaoImpl(); //al=s.listCurrent(id); Stock s=si.listGoogle(); System.out.println("reached here"); model.addAttribute("s", s ); return s; }与{{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}}

在活跃的{{linkTo}} </li>周围创建<li class =“active”>

3 个答案: