動態流星模板

Question

所以，問題是我有一個導航欄的模板，我想動態地改變'li'元素的類。到目前爲止，我有這樣的代碼進行更改（.js文件）：

Template.navigation.onCreated(function() { 
    Template.instance().currentTab = new ReactiveVar(); 
}); 

Template.navigation.helpers({ 
tab: function() { 
    return Template.instance().currentTab.get(); 
} 
}); 
Template.navigation.events({ 
'click .navbar-nav li': function(event) { 
    var currentTab = $(event.target).closest('li'); 
    currentTab.addClass('active'); 
    $('.navbar-nav li').not(currentTab).removeClass('active'); 
} 
}); 

但我必須點擊「禮」元素兩次才能看到的變化。我試圖按照這個主題jQuery click() still being triggered after .clickable class is removed的答案，但沒有運氣。我非常感謝任何幫助！提前致謝！ UPD：根據要求我發佈的HTML代碼，也充分的.js代碼 HTML：

<template name="navigation"> 
<!-- Navigation bit --> 
    <nav> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       </button> 
       <a class="navbar-brand" href="{{pathFor route='welcome'}}"></a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="{{pathFor route='welcome'}}">Home</a></li> 
        <li><a href="{{pathFor route='about'}}">About</a></li> 
        <li><a href="{{pathFor route='projects'}}">Projects</a></li> 
        <li><a href="{{pathFor route='numbers'}}">Numbers</a></li> 
        <li><a href="{{pathFor route='contact'}}">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    {{> Template.dynamic template=tab}} 
</template> 

Answer 1

試試這個

$(".navbar-nav li").click(function(){ 
    $('.navbar-nav li').removeClass('active'); 
    $(this).addClass('active'); 
}) 

如果您發佈的HTML代碼，我可能能夠提供更多詳細如果你需要它。