使用Meteor和Iron路由器创建活动导航状态
我想向当前由Iron Router呈现的导航列表项添加一个'active'类。使用Meteor和Iron路由器创建活动导航状态
这里是我的标记:
<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>
我已经通过引导和各种文章阅读,但无法找到该覆盖的任何地方。假设我需要某种帮手?
这里是我如何做到这一点。
首先,我运行这个(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)
每个用户都可以配置他/她自己的边栏菜单。登出的用户只有一个选项(登录)。等完全数据控制。
为了得到这个工作,我需要在助手中使用'Router.current()。route.getName()'而不是'this.name'。 – 2015-03-25 01:46:15
*会议组织。是的,我的助手可能还有其他东西能正确显示this.name。接得好。谢谢。 – 2015-03-25 15:06:14
流星添加铁 - 路由器活性 =>错误在解析参数: 在添加包铁路由器活性: 错误:没有这样的包 – 2015-01-09 22:32:06
看起来像铁路由器活性与流星0.9.0不相容然后... – 2015-01-09 22:58:28
我会建议升级流星,然后像这样安装它:** meteor add zimme:iron-router-active **。您可以在** atmospherejs.com上找到更多详情:https://atmospherejs.com/zimme/iron-router-active**。 – 2015-01-10 02:02:16