Question

我想添加一类“活跃的”＆＃39;到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）：

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

然后对于导航中我显示新页面链接的每个地方，我的html（在我的情况下为jade）看起来像这样：

a(href=path class=isActive)

最后，具有此类链接的任何模板的帮助程序（同样是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)

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

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

2 个答案: