Question

我的流星应用/:slug/profile中有一条路线，当导航到时，会显示一个用户个人资料模板，该模板可以使用某些nav-pills导航，点击后会动态加载嵌套模板。< / p>

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.log(username)



        Router.go("/"+username+"/profile")



    }


})

Template.registerHelper('thisConnectionsProfilePic', function(username) {
        let mup= UserImages.findOne({username:username}).image
        return mup
    }
)

当用户点击其正在查看的个人资料的其中一个用户的个人资料图片时，系统会调用click #default功能。这会将用户定向到单击的用户配置文件。所有新用户数据加载正常，并按预期填充配置文件模板。

我的问题是，我想在每次用户访问该路线时将活动模板和活动nav-pills重置为其初始值。目前，用户到达的当前嵌套模板单击配置文件图像，保持活动状态，但只是使用新用户数据重新填充。

Answer 1

用一些jquery修复它

Template.clickable_following.events({

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



    }


})

如何在meteor.js中重置Template.dynamic

1 个答案: