使用Meteor和Iron路由器创建活动导航状态

Question

我想向当前由Iron Router呈现的导航列表项添加一个'active'类。

这里是我的标记：

<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（玉在我的情况）看起来是这样的：

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模板。完全干。这里是我的两个级深度的限制比如（再次玉）：

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) 

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