登录时重新渲染模板

Question

In navbar I have 2 dropdowns, and one of them is available only if user is logged in (otherwise I hide it with {{#if currentUser}} ).

For a dropdown to work it should be activated with jquery like this: $('.somedropdown').dropdown(); .

In meteor:

Template.navbar.rendered = function () { this.$('.somedropdown') .dropdown(); };

In my case I assigned these classes to dropdowns: .guest (for dropdown that is available all the time) and .useronly (for that which is available only if user is signed in).

And thus I try to do re-rendering of navbar adding this.autorun to rendered callback. It checks if user is logged in and should trigger re-rendering accordingly:

Template.navbar.rendered = function () { this.$('.guest').dropdown(); this.autorun(function() { if(Meteor.userId()) { $('.useronly').dropdown(); } }); };

But it does not work.

1. When I first load webpage navbar renders OK without the .useronly dropdown.
2. When I sign in the .useronly dropdown appears but it is not activated via jquery.
3. If I then run activation code $('.useronly').dropdown(); in console - the dropdown starts to work. It means the problem is not with jquery code.

Meteor.userId() is reactive so I don't get it why this.autorun does not thigger re-rendering.

PS If it is important to mention, I use Semantic UI dropdown module http://semantic-ui.com/modules/dropdown.html (this is where jquery activation code comes from).

PPS there are already similar questions on stackoverflow but I did not find any appropriate solution from the answers.

Thank you for any help in advance.

SOLUTION

By adding console.logs into the code mentioned above I found that autorun actually worked but the jquery code ran before dropdown was actually rendered. So I wrapped autorun function into Meteor.setTimeout():

Template.header.rendered = function () { // activate always available .guest dropdown this.$('.guest') .dropdown(); // activate .useronly dropdown if user is logged in this.autorun(function() { if(Meteor.userId()) { Meteor.setTimeout(function() { // add 0 delay just to add it last to the event loop $('.useronly') .dropdown(); }, 0); } }); };

PS also check the neater solution by https://stackoverflow.com/users/2104665/peppe-lg in answers.

Answer 1

I'm guessing your autorun runs before the {{#if currentUser}} block in your template is updated, which means $('.useronly') won't refer to any element.

I think the Meteor way to solve this is by using an extra template:

<template name="main">
    {{#if currentUser}}
        {{> signedInDropDown}}
    {{/if}}
</template>

<template name="signedInDropDown">
    <!-- Your drop down here. -->
</template>

Template['signedInDropDown'].rendered = function(){
    this.$('.useronly').dropdown();
}