javascript - Meteor应用中按下返回键时如何正确设置Active Navigation Tab？

Question

我有一个多页面 meteor 应用程序，每个页面都包含一个导航模板。

我使用 iron-router 在页面之间切换。

我通过将适当的导航链接的类设置为“事件”来指示用户所在的页面。

示例:navigation.html

<li class="{{navClassName 'page1'}}">
  <a href="/page1">Page 1 </a>
</li>
<li class="{{navClassName 'page2'}}">
  <a href="/page1">Page 2 </a>
</li>

在 navigation.js 中:

Template.registerHelper('navClassName', function (page) {
  if (Router.current()) {
    return Router.current().route.getName() === page ? "active" : "";
  }
});

我的问题是，当我按下浏览器的后退按钮时，page1 和 page2 链接都显示为事件的。

如能提供任何帮助，我们将不胜感激。

Answer 1

在无法看到您的路由定义的情况下，我会说您必须在代码中的某处重复引用第一条路由。我可以肯定地说您的全局模板助手已正确实现，因为我定义所有事件选项卡模板助手的方式与您定义模板助手的方式相同(只有很小的语法差异)。

对于您的 HTML，除了您的第 2 页 anchor 标记引用了错误的路由之外，一切看起来都很好。我建议像这样实现您的标签以利用 Iron-Router 模板助手:

<li class="{{navClassName 'page1'}}">
    <a href="{{pathFor 'page1'}}">Page 1</a>
</li>
<li class="{{navClassName 'page2'}}">
    <a href="{{pathFor 'page2'}}">Page 2</a>
</li>

使用以这种方式定义的 HTML，如果您碰巧更新了路由路径，则根本不必更新 anchor 标记路径引用。它们将随着 Iron Router 提供的 pathFor 模板助手的使用而相应地改变。

如果您可以编辑您的问题以包含您的路由定义逻辑，我可以帮助您更多地解决这个问题。