Выделите активный маршрут в загрузочной навигации при использовании Flow-Router

Итак, я нашел эту панель навигации с Bootstrap-3, но на данный момент я использую Flow-Router вместо Iron-Router. Таким образом, я пытаюсь преобразовать эту вспомогательную функцию в термины Flow-Router:

Template.navItems.helpers({
    activeIfTemplateIs: function (template) {
      var currentRoute = Router.current();
      return currentRoute &&
        template === currentRoute.lookupTemplate() ? 'active' : '';
    }
});

Я предпринял собственную попытку решить проблему (хотя и не удосужился протестировать ее, так как многие части моего сайта/приложения все еще не работают), но мне требуется подтверждение в форме «да» или «нет» и возможно, немного больше информации о том, что я сделал неправильно.

Template.navItems.helpers({
    activeIfTemplateIs: function (template) {
      var currentRoute = FlowRouter.current();
      return currentRoute &&
        template === currentRoute.name ? 'active' : '';
    }
});

Я руководствовался API Flow-Router. Правильно ли это решение или оно по тем или иным причинам строго обязательно для использования с Iron-Router?


meteor twitter-bootstrap-3 iron-router flow-router
person Yokhen    schedule 27.09.2015    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Немного подумав о вашей реальной проблеме, я понял, что делаю это в своем приложении совершенно по-другому, и что, возможно, вы можете найти этот шаблон полезен. Мое приложение также использует начальную загрузку и имеет навигацию, в которой я хочу выделить активный маршрут (и отменить выделение всех остальных маршрутов).

В железном маршрутизаторе я делаю:

onAfterAction(){
  const selector = '.nav a[href="/' + Router.current().route.getName() + '"]'; // the nav item for the active route (if any)
  $('.nav-active').removeClass('nav-active'); // unhighlight any previously highlighted nav
  $(selector).addClass('nav-active'); // highlight the current nav (if it exists, many routes don't have a nav)
}

В Flow-Router onAfterAction заменяется на triggersExit, поэтому вы можете:

triggersExit(){
  const selector = '.nav a[href="' + FlowRouter.current().path + '"]';
  $('.nav-active').removeClass('nav-active');
  $(selector).addClass('nav-active');
}

Я нашел это намного удобнее, чем возиться с шаблонами пробелов.

К вашему сведению, у вас есть несколько вариантов получения имени маршрута:

FlowRouter.getRouteName() // reactive

or

FlowRouter.current().route.name // NOT reactive
person Michel Floyd    schedule 27.09.2015
comment
Спасибо, что сообщили нам, что FlowRouter.getRouteName() является реактивным. Именно то, что мне было нужно. - person Dave Rapin; 02.11.2015

arrow_upward
3
arrow_downward

Теперь вы можете использовать пакет Active-Route.

Например:

<a class="nav-tab {{isActivePath class='nav-current' path='/new'}}" href="/new">
  New
</a>
person mhlavacka    schedule 23.04.2016

arrow_upward
0
arrow_downward

Чтобы дать вам более полную картину, вот что сделал для моего проекта.

HTML-код шаблона

<template name="topNavbar">
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a class="navbar-brand" href="/">Sample</a></li>

    <li class="{{ activeIfTemplateIs 'home' }}">
      <a href="/home">Home</a>
    </li>

    <li class="{{ activeIfTemplateIs 'users' }}">
      <a href="/users">Users</a>
    </li>

  </ul>
</nav>
</template>

JavaScript-код

Template.topNavbar.helpers({
  activeIfTemplateIs: function (template) {
    var currentRoute = FlowRouter.getRouteName();
    return currentRoute && template === currentRoute ? 'active' : '';
  }
});
person Alan Dong    schedule 11.04.2016