2015-12-24 2 views
0

Итак, проблема в том, что у меня есть шаблон для панели навигации, где я хотел бы динамически изменять класс элемента 'li'. До сих пор у меня есть этот код, чтобы сделать изменения (.js):Dynamic Meteor Templates

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

Но я должен нажать элемент «LI» дважды, чтобы увидеть изменения. Я попытался ответить на этот вопрос 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> 
+1

Ваш код выглядит хорошо. Проблема должна быть где-то еще –

ответ

1

Попробуйте

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

Если вы размещаете свой HTML код, я могу быть в состоянии обеспечить более если вам это нужно.

+0

Я пробовал ваш бит - все равно не повезло. Добавлено обновление, возможно, это поможет! – JDRussia