Как сбросить Template.dynamic в meteor.js

У меня есть маршрут в моем метеорном приложении /: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 до их начальных значений каждый раз, когда пользователь посещает этот маршрут. В настоящий момент текущий вложенный шаблон, который пользователь достиг, чтобы щелкнуть изображение профиля, остается активным, но просто повторно заполняется данными новых пользователей.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
129
1

Ответы 1

Исправлено с помощью некоторого jquery

Template.clickable_following.events({

    'click #default': function(event, template) {
        let username = this.username
        $('#details').click();
        Router.go("/"+username+"/profile")



    }


})

Другие вопросы по теме