使用 Meteor 和 Iron Router 创建活动导航状态

Question

我想将 'active' 的 class 添加到 Iron Router 当前正在呈现的导航列表项中。

这是我的标记：

<ul>
  <li>
    {{#linkTo route="option1"}}
      <span class="fa fa-fw fa-option"></span>
      Option 1
    {{/linkTo}}
  </li><li>
    {{#linkTo route="option2"}}
      <span class="fa fa-fw fa-option"></span>
      Option 2
    {{/linkTo}}
  </li>
</ul>

我已经通读了该指南和各种文章，但在任何地方都找不到这方面的内容。假设我需要某种帮手？

Answer 1

我认为您可能会发现 meteor-iron-router-active 很有用，因为它有以下帮助程序：

isActiveRoute
isActivePath

Answer 2

这是我的做法。

首先，我运行这个 (CoffeeScript) 当我设置 iron router 时：

Router.onAfterAction(() ->
  Session.set('active', @route.getName())
)

然后，对于我在导航栏中向新页面显示 link 的每个位置，我的 html（在我的例子中为 jade）如下所示：

a(href=path class=isActive)

最后，具有此类 link 的任何模板的助手（同样是 CoffeeScript）具有以下内容：

Template.navElement.helpers(
  isActive: () ->
    if this.name is Session.get('active')
      return "active"
    else
      return ""
)

注意，如果 this.name 不起作用，请尝试：Router.current().route.getName()

----- 此行下方的可选额外内容 -----

这不是满足您的要求所必需的，但我使用单个递归调用的模板对导航进行数据驱动，因此上面的代码只在我的代码中出现一次，但我从几个不同的地方引用了 navElement 模板。完全干燥。这是我的两级深度受限示例（同样是 Jade）：

template(name="navElement")
  li
    a(href=path class=isActive)
      if icon
        i.fa.fa-fw(class=icon)
      | #{label}
      if children
        span.fa.arrow
    if children
      ul.nav.nav-second-level
        each children
          +navElement

在我的侧边栏或顶部栏中调用它的地方如下所示：

    each navElements
      +navElement

有了这个帮手：

Template.sidebar.helpers(
  navElements: () ->
    return Session.get('navRoots')
)

我最初设置并根据用户的操作不时更改，navRoots 会话变量是这样的：

    navRoots = [
      {icon:"fa-gear", label:"Menu item 1", children: [
        {label: "Sub menu item 1.a"},
        {label: "Sub menu item 1.b"}
      },
      {label: "Menu item 2"}
    ]
    Session.set('navRoots', navRoots)

每个用户都可以配置 his/her 自己的边栏菜单。注销的用户只有一个选项（登录）。等等。完全数据控制。

使用 Meteor 和 Iron Router 创建活动导航状态

Creating active navigation state with Meteor and Iron Router

templating

meteor

iron-router