ember.js - 在 Ember 中激活单个 {{link-to}}

Question

在我的 Ember 应用程序中，我有带组的导航栏。每个独特的项目在栏中出现两次:在它自己的组中和在“所有项目”组中:



如果用户选择第 3 项，则通过获取 active 使两个链接都处于事件状态。 CSS类:



如何更改我的代码，以便用户单击的链接变为事件状态？如果用户手动打开/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