Question

在我的Ember应用程序中，我有带组的导航栏。每个唯一项目在栏中显示两次：在其自己的组中和在＆＃34;所有项目＆＃34;组：

如果用户选择第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建议的那样，或者（为了避免额外的参数并使网址用户友好）为每个组创建一个单独的路线：

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

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

2 个答案: