动态流星模板 [英] Dynamic Meteor Templates

问题描述

因此，问题是我有一个导航栏模板，我想在其中动态更改'li'元素的类.到目前为止，我已经有了这段代码来进行更改(.js):

So, problem is that I have a template for navigation bar, where I would like to dynamically change the class of a 'li' element. So far I have this code to make changes (.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');
}
});

但是我必须单击"li"元素两次才能查看更改.我试图遵循此主题的答案 jQuery click()仍然在删除.clickable类之后被触发，但是没有运气.我将非常感谢您的帮助！提前致谢！ UPD:根据要求，我发布html代码以及完整的.js代码 html:

But I have to click the 'li' element twice in order to see the changes. I tried to follow answer from this topic jQuery click() still being triggered after .clickable class is removed , however with no luck. I would really appreciate any help! Thanks in advance! UPD: As requested I publish html code and also full .js code 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>

推荐答案

尝试一下

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

如果您发布html代码，则我可以在需要时提供更多详细信息.

If you post your html code, I may be able to provide more detail if you need it.

这篇关于动态流星模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！