流星:单击时更改链接的类 [英] Meteor: Change the class of link on click
问题描述
模板:
<div class="blog-masthead"><div class="容器"><nav class="blog-nav"><a class="blog-nav-item {{active}}" href="{{pathFor 'homePage'}}">Home</a>{{#if currentUser}}<a class="blog-nav-item {{active}}" href="#">{{Meteor.userId}}</a>{{别的}}<a class="blog-nav-item {{active}}" href="{{pathFor 'loginPage'}}">登录</a><a class="blog-nav-item {{active}}" href="{{pathFor 'signUpPage'}}">注册</a>{{/如果}}<a class="blog-nav-item {{active}}" href="#">关于</a></nav>header.js
Template.header.events({'点击a':函数(e){e.preventDefault();this.active?"active":"";}});我只想将点击链接的类设置为 active.单击的链接类应类似于 class="blog-nav-item active".
我想这将是您想要的Meteor 方式":
<ul><li class="{{#if isCurrentPage 'pageA'}}active{{/if}}"><a href="{{pathFor 'pageA'}}">页面 A</a><li class="{{#if isCurrentPage 'pageB'}}active{{/if}}"><a href="{{pathFor 'pageB'}}">页面 B</a><li class="{{#if isCurrentPage 'pageC'}}active{{/if}}"><a href="{{pathFor 'pageC'}}">页面 C</a>Router.onBeforeAction(function(){Session.set('currentRouteName', Router.current().route.name)})模板.menu.helpers({isCurrentPage:函数(页面名称){return Session.equals('currentRouteName', pageName)}})Router.current().route.name 在最新版本的铁路由器中评估当前页面名称，但我不知道这是否是应该使用的公共 API 的一部分.
编辑
Router.current() 显然是响应式的，因此您需要的所有 JavaScript 代码如下:
Template.menu.helpers({isCurrentPage:函数(页面名称){返回 Router.current().route.name == pageName}})Template:
<template name="header">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item {{active}}" href="{{pathFor 'homePage'}}">Home</a>
{{#if currentUser}}
<a class="blog-nav-item {{active}}" href="#">{{Meteor.userId}}</a>
{{else}}
<a class="blog-nav-item {{active}}" href="{{pathFor 'loginPage'}}">Login</a>
<a class="blog-nav-item {{active}}" href="{{pathFor 'signUpPage'}}">Sign Up</a>
{{/if}}
<a class="blog-nav-item {{active}}" href="#">About</a>
</nav>
</div>
</div>
</template>
header.js
Template.header.events({
'click a': function(e) {
e.preventDefault();
this.active?"active":"";
}
});
I just want to make set click link's class as active. Clicked link class should look like class="blog-nav-item active".
I guess this would be the "Meteor way" you wanted:
<template name="menu">
<ul>
<li class="{{#if isCurrentPage 'pageA'}}active{{/if}}">
<a href="{{pathFor 'pageA'}}">Page A</a>
</li>
<li class="{{#if isCurrentPage 'pageB'}}active{{/if}}">
<a href="{{pathFor 'pageB'}}">Page B</a>
</li>
<li class="{{#if isCurrentPage 'pageC'}}active{{/if}}">
<a href="{{pathFor 'pageC'}}">Page C</a>
</li>
</ul>
</template>
Router.onBeforeAction(function(){
Session.set('currentRouteName', Router.current().route.name)
})
Template.menu.helpers({
isCurrentPage: function(pageName){
return Session.equals('currentRouteName', pageName)
}
})
Router.current().route.name do evaluate to the current page name in the latest version of iron router, but I don't know if that's part of the public API one should use.
EDIT
Router.current() is apparently reactive, so all JavaScript code you need is the following:
Template.menu.helpers({
isCurrentPage: function(pageName){
return Router.current().route.name == pageName
}
})
这篇关于流星:单击时更改链接的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
