使用Flow-Router时,在引导程序导航中突出显示活动路由

Question

所以我发现这个导航栏功能与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一起使用？

Answer 1

在进一步思考你的真实问题之后,我意识到我正在以一种完全不同的方式在我的应用程序中这样做,也许你可能会发现这种模式很有用.我的应用程序也使用bootstrap并有一个导航,我想突出显示活动路线(并取消突出显示所有其他路线).

在铁路由器中,我做:

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