CODEWITHSUNDEEP
jquerymeteor
JDRussia
JDRussia

Reputation: 65

Dynamic Meteor Templates

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

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>

Upvotes: 0

Views: 207

Answers (1)

Preethi Mano
Preethi Mano

Reputation: 445

Try this

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

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

Upvotes: 1

Related Questions