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

我只想将 set click link 的类设置为 active。单击的链接类应该类似于 class="blog-nav-item active"。

Answer 1

下面的示例依赖于 iron-router 并展示了一种添加 active 类的响应式(Reactive)方法

首先应该修改模板为:

<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+

As of iron-router 1.0, A route's name is now accessible at
route.getName() (previously it was route.name).

In particular, you'll need to write return
curRoute.getName() === routeName ? 'active' : '';

感谢@jrbedard 的通知