Итак, проблема в том, что у меня есть шаблон для панели навигации, где я хотел бы динамически изменять класс элемента '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>
Ваш код выглядит хорошо. Проблема должна быть где-то еще –