使用Flow-Router时，在引导导航中突出显示活动路由 [英] Highlight active route in bootstrap nav when using Flow-Router

问题描述

所以我找到了这个具有Bootstrap-3的导航栏功能，但到目前为止，我使用的是Flow-Router而不是Iron-Router.因此，我正在寻求将此辅助函数转换为Flow-Router术语:

So I found this Navigation Bar feature with Bootstrap-3, but as of now I am using Flow-Router instead of Iron-Router. Thus I am seeking to transform this helper function into Flow-Router terms:

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

我已尝试解决此问题(尽管我的网站/应用程序的许多部分仍无法正常运行，但也没有进行测试)，但是我需要以是"或否"，也许还有更多关于我做错了什么的信息.

I have made my own attempt at fixing the problem (haven't bothered testing it though, as many parts of my site/app are still not functional), but I require confirmation in the form of a "yes" or "no" and perhaps a bit more information on what I did wrong.

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

我从流路由器API 进行了自我指导.此解决方案是否正确，还是出于某种原因或与铁路由器一起严格使用的另一个原因?

I guided myself from the Flow-Router API. Is this solution correct or is it for one reason or another strictly bound to be used with Iron-Router?

推荐答案

进一步思考了您的实际问题之后，我意识到我正在用完全不同的方式在我的应用程序中执行此操作，也许您可​​能会发现<一个href ="http://0rocketscience.blogspot.com/2015/08/meteor-build-clean-easy-to-maintain.html" rel ="nofollow noreferrer">该模式很有用.我的应用程序还使用了引导程序，并且在我要突出显示活动路线的同时导航(并取消突出显示所有其他路线).

After thinking about your real issue a bit further, I realized I'm doing this is in my app in a completely different way and that perhaps you might find that pattern useful. My app also uses bootstrap and has a nav where I want to highlight the active route (and un-highlight all other routes).

在铁路由器中，我这样做:

In iron-router, I do:

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，因此您可以执行以下操作:

In Flow-Router, onAfterAction is replaced by triggersExit so you can do:

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

我发现这比处理空格键模板要方便得多.

I found this much more convenient than mucking with the spacebars templates.

仅供参考，您有两种选择来获取路线名称:

FYI, you have a couple options to get the route name:

FlowRouter.getRouteName() // reactive

或

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

这篇关于使用Flow-Router时，在引导导航中突出显示活动路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！