登录时重新渲染模板

Question

在navbar中，我有2个下拉菜单，其中只有在用户登录后才可用（否则我会用{{#if currentUser}}将其隐藏）。

为了使下拉菜单正常工作，应使用jquery这样激活它： $('.somedropdown').dropdown(); 。

在流星中：

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

在我的情况下，我将这些类分配给了下拉菜单： .guest （对于始终可用的下拉菜单）和.useronly （对于仅在用户登录.useronly可用的下拉菜单）。

因此，我尝试重新渲染导航栏，将this.autorun添加到rendered回调中。 它检查用户是否已登录，并应相应触发重新渲染：

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

但这行不通。

1. 首次加载网页时，Navbar会显示OK，而不会显示.useronly下拉列表。
2. 当我登录时，出现.useronly下拉列表，但未通过jquery激活。
3. 如果然后运行激活代码$('.useronly').dropdown(); 在控制台中-下拉列表开始工作。 这意味着问题不在于jQuery代码。

Meteor.userId()是反应性的，所以我不明白为什么this.autorun不会重新渲染。

PS：如果需要提及，我使用语义UI下拉模块http://semantic-ui.com/modules/dropdown.html （这是jquery激活代码的来源）。

PPS已经有关于stackoverflow的类似问题，但是我没有从答案中找到任何合适的解决方案。

感谢您的任何帮助。

解

通过将console.logs添加到上述代码中，我发现自动运行确实有效，但是在实际呈现下拉菜单之前运行了jquery代码。 所以我将自动运行功能包装到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还会在答案中通过https://stackoverflow.com/users/2104665/peppe-lg检查更整洁的解决方案。

Answer 1

我猜想您的自动运行会在模板中的{{#if currentUser}}块更新之前运行，这意味着$('.useronly')不会引用任何元素。

我认为流星解决此问题的方法是使用额外的模板：

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

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

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