I have a Route in my meteor app /:slug/profile, that when navigated to, displays a users profile template, which is navigable using some nav-pills, that when clicked, dynamically load a nested template.
clickable_profile.html
<template name="clickable_profile">
<div id="nav">
<ul class="nav nav-pills">
<li data-template="clickable_picture" role="presentation" class="active" id="details"> <a href="#" >User Details<span class="sr-only">(current)</span></a> </li>
<li data-template="clickable_shared" role="presentation"> <a href="#">Shared Files</a> </li>
<li data-template="clickable_connections" role="presentation" id="connections" > <a href="#">Connections</a> </li>
</ul>
</div>
{{> Template.dynamic template=tab }}
</template>
clickable_profile.js
Template.clickable_profile.onCreated( function() {
this.currentTab = new ReactiveVar( "clickable_picture" );
});
Template.clickable_profile.helpers({
tab: function() {
return Template.instance().currentTab.get();
}
});
Template.clickable_profile.events({
'click .nav-pills li': function( event, template ) {
var currentTab = $( event.target ).closest( "li" );
currentTab.addClass( "active" );
$( ".nav-pills li" ).not( currentTab ).removeClass( "active" );
template.currentTab.set( currentTab.data( "template" ) );
}
})
One of the nested templates has its own set of nav-pills which looks like this
clickable_connections.html
<template name="clickable_connections">
<div id="profile-wrap">
<div id="nav-nested">
<ul class="nav nested-nav-pills">
<li data-template="clickable_followers" role="presentation" class="active" id="clickable_followers"> <a href="#" >Followers<span class="sr-only">(current)</span></a> </li>
<li data-template="clickable_following" role="presentation" id="clickable_following"> <a href="#">Following </a></li>
</ul>
</div>
<div class="row">
{{> Template.dynamic template=tabs }}
</div>
</div>
</template>
clickable_connections.js
Template.clickable_connections.onCreated( function() {
this.currentTab = new ReactiveVar( "clickable_followers" );
});
Template.clickable_connections.helpers({
tabs: function() {
return Template.instance().currentTab.get();
},
thisProfilesFollowers: function(){
const followers = this.profilesFollowers
return Meteor.users.find({_id: {$in: followers}});
},
});
Template.clickable_connections.events({
'click .nested-nav-pills li': function( event, template ) {
var currentTab = $( event.target ).closest( "li" );
currentTab.addClass( "active" );
$( ".nested-nav-pills li" ).not( currentTab ).removeClass( "active" );
template.currentTab.set( currentTab.data( "template" ) );
}
})
One of these nested-nav-pills renders a template that shows who a user follows
clickable_following.html
<template name="clickable_following">
{{#each whoThisProfilesFollows}}
<div class="col-lg-4 col-sm-4 col-12 main-box-layout">
<div class="box rounded">
<div class="pull-left image">
<img src="{{thisConnectionsProfilePic(username)}}" class="img-circle followavatar" alt="user profile image" id="default" >
</div>
</div>
<div class="box-layout-text text-right">
<span class="details">{{username}}</span><br>
<div class =row id="votes">
<img src="/up.png" class="ranks" id="upvote">
<img src="/down.png" class="ranks" id="downvote">
</div>
<div class="row" id="scores">
<h3 class="count white block">{{profile.upScore}}</h3>
<h3 class="count white block">{{profile.downScore}}</h3>
</div>
</div>
</div>
{{else}}
<p>This User follows nobody yet!</p>
{{/each}}
</template>
clickable_following.js
Template.clickable_following.helpers({
whoThisProfilesFollows: function(){
const following = this.whoProfilesFollows
return Meteor.users.find({username: {$in: following}});
} ,
});
Template.clickable_following.events({
'click #default': function(event, template) {
let username = this.username
console.log(username)
Router.go("/"+username+"/profile")
}
})
Template.registerHelper('thisConnectionsProfilePic', function(username) {
let mup= UserImages.findOne({username:username}).image
return mup
}
)
The click #default function is called when a user clicks on the profile picture of one of the users that the profile they are viewing follows. This directs the user to the clicked users profile. All the new users data loads fine, and populates the profile template as expected.
My problem is, I want to reset the active template and active nav-pills to their initial values every time a user visits that route. At the moment the current nested template that the user reached to click a profile image, stays active, but are just repopulated with the new users data.