在 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

Answer 2

首先，我想说这是一个非常有趣的问题，谢谢。

您可以按照@pavel-chuchuva 的建议进行操作，或者（为了避免额外的参数并使 url 对用户友好）为每个组创建单独的路由：

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

您可以创建一个混合以避免相同代码的 3 个副本

var itemsRoute = Ember.Mixin.create({
  model: function(params) {
    /*return something useful*/
    return params.item_id;  
  }
});

并从该 mixin 扩展所有 a 和 b 路由：

App.AllRoute = Ember.Route.extend(itemsRoute, {});
App.ARoute = Ember.Route.extend(itemsRoute, {});
App.BRoute = Ember.Route.extend(itemsRoute, {});

工作示例：http://jsbin.com/nibacogeye/edit?html,js,output