使用 Flow-Router 时在引导导航中突出显示活动路由答案

【问题标题】：Highlight active route in bootstrap nav when using Flow-Router使用 Flow-Router 时在引导导航中突出显示活动路由
【发布时间】：2015-12-25 00:19:32
【问题描述】：

所以我找到了这个Navigation Bar feature with 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' : '';
    }
});

我从Flow-Router API 引导自己。这个解决方案是正确的，还是出于某种原因，它必须与 Iron-Router 一起使用？

【问题讨论】：

标签： meteor twitter-bootstrap-3 iron-router flow-router

【解决方案1】：

在进一步考虑了您的真正问题后，我意识到我正在以完全不同的方式在我的应用程序中执行此操作，也许您会发现 that pattern 很有用。我的应用程序还使用引导程序并有一个导航，我想在其中突出显示活动路线（并取消突出显示所有其他路线）。

在 Iron-router 中，我会这样做：

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

或

FlowRouter.current().route.name // NOT reactive

【讨论】：

感谢您让我们知道 FlowRouter.getRouteName() 是响应式的。正是我需要的。

【解决方案2】：

现在您可以使用Active-Route package。

例如：

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

【讨论】：

【解决方案3】：

为了给你一个更完整的画面，这就是我的项目所做的。

模板 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' : '';
  }
});

【讨论】：