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 } })

Answer 3

您只能使用JavaScript解决此问题：

Template.header.events({
    'click .blog-nav-item': function(event, template){

        // Remove the class 'active' from potentially current active link.
        var activeLink = template.find('.blog-nav-item')
        if(activeLink){
            activeLink.classList.remove('active')
        }

        // Add the class 'active' to the clicked link.
        event.currentTarget.classList.add('active')

    } 
})

Meteor：点击更改链接类别

3 个答案:

编辑v1.0 +