У меня есть маршрут в моем метеорном приложении /:slug/profile, который при переходе к нему отображает шаблон профиля пользователя, по которому можно перемещаться с помощью некоторого nav-pills, который при нажатии динамически загружает вложенный шаблон.
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" ) );
}
})
Один из вложенных шаблонов имеет собственный набор nav-pills, который выглядит так
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" ) );
}
})
Один из этих nested-nav-pills отображает шаблон, показывающий, за кем следует пользователь.
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.info(username)
Router.go("/"+username+"/profile")
}
})
Template.registerHelper('thisConnectionsProfilePic', function(username) {
let mup= UserImages.findOne({username:username}).image
return mup
}
)
Функция click #default вызывается, когда пользователь нажимает на изображение профиля одного из пользователей, за которым следует профиль, который он просматривает. Это направляет пользователя к профилю пользователя, по которому щелкнули. Все новые данные пользователей загружаются нормально и заполняют шаблон профиля должным образом.
Моя проблема в том, что я хочу сбрасывать активный шаблон и активный nav-pills до их начальных значений каждый раз, когда пользователь посещает этот маршрут. В настоящий момент текущий вложенный шаблон, который пользователь достиг, чтобы щелкнуть изображение профиля, остается активным, но просто повторно заполняется данными новых пользователей.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Исправлено с помощью некоторого jquery
Template.clickable_following.events({
'click #default': function(event, template) {
let username = this.username
$('#details').click();
Router.go("/"+username+"/profile")
}
})