Создание {{link-to}} активного в Ember

В моем приложении 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}}

Эмбер версия: 2.4.2

Ответ 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

Ответ 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;  
  }
});

И расширьте все, a и b маршруты из этого mixin:

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