Links ativos no Meteor

Se você usa o Meteor Router ou uma solução de roteamento semelhante, você pode querer dar aos links navbar uma activeclasse quando estiver naquela página. Se você está experimentando os ajudantes de modelo, provavelmente está agindo da maneira errada. Não poderia ser mais simples registrar um auxiliar personalizado do Guiador.

Primeiro, definimos um método que obtém o caminho atual. Isso simplesmente retorna o caminho sem um /no final ou apenas /se estivermos no caminho raiz:

// Get the current path for URL
curPath=function(){var c=window.location.pathname;var b=c.slice(0,-1);var a=c.slice(-1);if(b==""){return"/"}else{if(a=="/"){return b}else{return c}}};

A seguir, vamos registrar o auxiliar. Observe o encerramento como o segundo argumento? É nisso que entraremos quando usarmos o auxiliar em nossa visão. Em seguida, apenas verificamos se nosso pathargumento corresponde ao caminho real da página atual e retornamos “ativo” se for o caso. Fácil:

// Determine if current link should be active
Handlebars.registerHelper('active', function(path) {
    return curPath() == path ? 'active' : '';
});

Agora podemos usá-lo em nossa visão:

<ul class="nav">
    <li class="{{active '/'}}">
        <a href="/">Home</a>
    </li>
    <li class="{{active '/some/page'}}">
        <a href="/some/page">Some Page</a>
    </li>
    <li class="{{active '/about'}}">
        <a href="/about#faq">FAQ</a>
    </li>
    ...
</ul>

Voila!

Para um excelente conjunto de ajudantes úteis, verifique o excelente pacote Meteor Handlebar Helpers do raix .