Eu originalmente tentei alguns métodos em que você registra um assistente de guiador global para definir estados ativos em links ( este, principalmente ), mas achei um pouco repetitivo.
Portanto, o que faço agora é ligar para o callback de renderização do modelo de layout do aplicativo.
Estou usando o Iron Router para roteamento e ele está configurado para usar um layout simples.
Sempre que esse layout é renderizado I, procuro por quaisquer links que estão ativos e removo essa classe, então onde o atributo href corresponde ao caminho atual, eu adiciono uma classe ativa.
Para minha navegação (usando uma barra de navegação de bootstrap), faço algo semelhante, mas só quero comparar com o radical do url para que ‘Postagens’ ainda esteja ativo quando estivermos olhando para ‘/ posts / hello-world’ etc.
Template.layout.rendered = ->
setActiveLinks()
setActiveLinks = _.debounce ->
path = location.pathname
$("a[href].active").removeClass('active')
$("a[href='#{path}']").addClass('active')
# deal with top level nav
stem = path.split('/')[1]
$('.navbar-nav > li.active').removeClass('active')
$(".navbar-nav a[href^='/#{stem}']").parent().addClass('active')
,250, trueEu tentei primeiro colocar esse recurso em um filtro global para o Iron Router, mas descobri que às vezes meus links não eram ativados. Isso acabou sendo o resultado de meu tempalte naval sendo refeito por alguns outros elementos reativos.
O retorno de chamada de renderização para o modelo de layout é acionado sempre que algo na página muda, então fez sentido colocar o manipulador de estado do link lá.
Por último, o retorno de chamada de renderização no modelo de layout estava sendo muito chamado! Então eu usei _.debounce para acalmar um pouco as coisas. Uma espera de 250 ms funciona para mim, mas talvez seja necessário ajustá-la.