在Ember中激活一个{{link-to}}

Question

在我的Ember应用程序中,我有组的导航栏.每个唯一项目在栏中显示两次:在其自己的组和"所有项目"组中:

如果用户选择Item 3,则两个链接都通过获取activeCSS类变为活动状态:

如何更改我的代码,以便用户点击的链接变为活动状态？如果用户手动打开/ item/3 URL,则只应激活第一个链接.

这是我到目前为止的代码:http://jsbin.com/yidofayoma/3/edit？html,js,output

var App = Ember.Application.create({
  rootElement: '#app'
});

App.Router.map(function() {
  this.route('item', { path: '/item/:item_id' });
});

App.ItemRoute = Ember.Route.extend({
  model: function(params) {
    return params.item_id;  
  }
});

导航栏模板:

<ul>
  <li>{{#link-to "index"}}Index{{/link-to}}</li>
  <li>
    All items
    <ul>
      <li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
      <li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
      <li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
      <li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
      <li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
    </ul>
  </li>
  <li>
    Group A
    <ul>
      <li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
      <li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
      <li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
    </ul>
  </li>
  <li>
    Group B
    <ul>
      <li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
      <li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
    </ul>
  </li>
</ul>
<hr />

{{outlet}}

Ember版本:2.4.2

Answer 1

将group查询参数添加到项路由:

App.ItemRoute = Ember.Route.extend({
  queryParams: {
    group: {}
  },
  model: function(params) {
    return params.item_id;  
  }
});

接下来,将group查询参数添加到每个链接:

<ul>
  <li>{{#link-to "index"}}Index{{/link-to}}</li>
  <li>
    All items
    <ul>
      <li>{{#link-to "item" 1 (query-params group="all")}}Item 1{{/link-to}}</li>
      <li>{{#link-to "item" 2 (query-params group="all")}}Item 2{{/link-to}}</li>
      <li>{{#link-to "item" 3 (query-params group="all")}}Item 3{{/link-to}}</li>
      <li>{{#link-to "item" 4 (query-params group="all")}}Item 4{{/link-to}}</li>
      <li>{{#link-to "item" 5 (query-params group="all")}}Item 5{{/link-to}}</li>
    </ul>
  </li>
  <li>
    Group A
    <ul>
      <li>{{#link-to "item" 1 (query-params group="a")}}Item 1{{/link-to}}</li>
      <li>{{#link-to "item" 2 (query-params group="a")}}Item 2{{/link-to}}</li>
      <li>{{#link-to "item" 3 (query-params group="a")}}Item 3{{/link-to}}</li>
    </ul>
  </li>
  <li>
    Group B
    <ul>
      <li>{{#link-to "item" 4 (query-params group="b")}}Item 4{{/link-to}}</li>
      <li>{{#link-to "item" 5 (query-params group="b")}}Item 5{{/link-to}}</li>
    </ul>
  </li>
</ul>

这只会激活一个链接.缺点是所有项目URL中的额外查询字符串参数,例如/item/5?group=all.

演示:http://jsbin.com/josogumaqo/edit？html,js,output