[英]How to reset Template.dynamic in meteor.js
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. 我的流星应用程序/:slug/profile
有一个Route,当导航到该路径时,显示一个用户配置文件模板,该模板可使用某些nav-pills
,单击该模板可动态加载嵌套模板。
clickable_profile.html 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 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 其中一个嵌套模板具有其自己的nav-pills
集,如下所示
clickable_connections.html 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 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 这些nested-nav-pills
呈现了一个模板,该模板显示了用户关注的对象
clickable_following.html 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 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. 当用户单击其中一个用户正在查看的个人资料的用户之一的个人资料图片时,将调用click #default
函数。 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. 我的问题是,我希望每次用户访问该路由时将活动模板和活动nav-pills
重置为其初始值。 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. 目前,用户单击该当前嵌套模板可单击个人资料图像,该模板仍处于活动状态,但只是重新填充了新的用户数据。
Fixed it with some jquery 用一些jQuery修复了它
Template.clickable_following.events({
'click #default': function(event, template) {
let username = this.username
$('#details').click();
Router.go("/"+username+"/profile")
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.