Создание активного состояния навигации с помощью Meteor и Iron Router

Question

Я хочу добавить класс 'active' к элементу списка навигации, который в данный момент отображается в Iron Router.

Вот моя разметка:

<ul>
  <li>
    {{#linkTo route="option1"}}
      <span class="fa fa-fw fa-option"></span>
      Option 1
    {{/linkTo}}
  </li><li>
    {{#linkTo route="option2"}}
      <span class="fa fa-fw fa-option"></span>
      Option 2
    {{/linkTo}}
  </li>
</ul>

Я прочитал руководство и различные статьи, но нигде не могу найти это. Предполагая, что мне понадобится какой-то помощник?

Answer 1

Я думаю, что вы могли бы найти https://github.com/zimme/meteor-iron-router-active полезным, поскольку у него есть помощники для следующего:

• isActiveRoute
• isActivePath

Answer 2

Вот как я это делаю.

Во-первых, я запускаю это (CoffeeScript) при настройке железного маршрутизатора:

Router.onAfterAction(() ->
  Session.set('active', @route.getName())
)

Затем для каждого места в моей навигации, где я показываю ссылку на новую страницу, мой HTML (в моем случае это Jade) выглядит так:

a(href=path class=isActive)

Наконец, помощник (снова CoffeeScript) для любого шаблона, который имеет такую ​​ссылку, имеет следующее:

Template.navElement.helpers(
  isActive: () ->
    if this.name is Session.get('active')
      return "active"
    else
      return ""
)

Обратите внимание, если this.name не работает, попробуйте: Router.current().route.getName()

----- Необязательный дополнительный материал под этой строкой -----

Это не требуется для удовлетворения вашего запроса, но я управляю данными с помощью одного рекурсивно вызванного шаблона, поэтому приведенный выше код встречается в моем коде только один раз, но я ссылаюсь на шаблон navElement из нескольких разных мест. Полностью сухой. Вот мой двухуровневый глубоко ограниченный пример (опять Джейд):

template(name="navElement")
  li
    a(href=path class=isActive)
      if icon
        i.fa.fa-fw(class=icon)
      | #{label}
      if children
        span.fa.arrow
    if children
      ul.nav.nav-second-level
        each children
          +navElement

И место в моей боковой панели или верхней панели, где это называется, выглядит так:

    each navElements
      +navElement

с этим помощником:

Template.sidebar.helpers(
  navElements: () ->
    return Session.get('navRoots')
)

Я устанавливаю изначально и время от времени меняю в зависимости от того, что делает пользователь, переменную сеанса navRoots примерно так:

    navRoots = [
      {icon:"fa-gear", label:"Menu item 1", children: [
        {label: "Sub menu item 1.a"},
        {label: "Sub menu item 1.b"}
      },
      {label: "Menu item 2"}
    ]
    Session.set('navRoots', navRoots)

Каждый пользователь может настроить свое меню на боковой панели. У вышедших пользователей есть только одна опция (Вход). И т.д. Полностью данные контролируются.