Meteor:点击更改链接类别

Question

模板:

<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":"";
    }
});

我只是想设置点击链接的类active.点击链接类应该是这样的class="blog-nav-item active".

Answer 1

下面的示例依赖于iron-router并提出了一种用于添加active类的反应方法

首先应将模板修改为:

<a class="blog-nav-item {{active 'homePage'}}" href="{{pathFor 'homePage'}}">Home</a>

然后适当的帮助应该是:

Template.name.helpers({
    active: function(routeName) {
        var curRoute = Router.current().route;
        return curRoute.name === routeName ? 'active' : '';
    }
});

编辑v1.0 +

从铁路由器1.0开始,现在可以访问路径的名称
route.getName() (以前是route.name).

特别是,你需要写回报
curRoute.getName() === routeName ? 'active' : '';

谢谢@jrbedard的通知

Answer 2

我想这将是你想要的"流星方式":

<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 评估最新版铁路由器中的当前页面名称,但我不知道这是否应该使用公共API的一部分.

编辑

Router.current() 显然是反应性的,所以您需要的所有JavaScript代码如下:

Template.menu.helpers({
    isCurrentPage: function(pageName){
        return Router.current().route.name == pageName
    }
})