Question

所以我发现了这个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' : '';
    }
});

我已经尝试解决这个问题（虽然我的网站/应用程序的许多部分仍无法正常运行，但我们仍然无法对其进行测试），但我需要以＆＃34的形式进行确认;是＆＃34;或＆＃34;不＆＃34;也许还有一些关于我做错了什么的信息。

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

我从Flow-Router API引导自己。这个解决方案是正确的还是出于某种原因而严格限制与Iron-Router一起使用？

Answer 1

在进一步思考你的真实问题之后，我意识到我正在以一种完全不同的方式在我的应用程序中这样做，也许你可能会发现that pattern有用。我的应用程序也使用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

Answer 2

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

例如：

    df <- Baby.names.ethnicity.NYC
    top_name <- subset(df, df$GNDR=="FEMALE" & df$RNK == 1 &
    (df$ETHCTY == "BLACK NON HISPANIC" | df$ETHCTY == "WHITE NON HISPANIC"))$NM

Answer 3

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

模板HTML代码

#map  {
    height: 40vh;
    width: 80%;
    background: white;
    margin-top: 270px;
    margin-left: 20px;
    display: block;
}

.otherdiv {
    height: 40vh;
    width: 80%;
    background: white;  
    margin-top: 270px;
    margin-left: 20px;
    display: block;
}

JavaScript代码

<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>

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

3 个答案: