Question

在导航栏中，我有2个下拉列表，其中一个仅在用户登录时可用（否则我将其隐藏{{#if currentUser}}）。

要使用下拉列表，应使用jquery激活它：$('.somedropdown').dropdown();。

在流星中：

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

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

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

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

但它不起作用。

当我第一次加载网页导航栏时，在没有.useronly下拉列表的情况下呈现正常。
当我登录时出现.useronly下拉列表，但未通过jquery激活。
如果我在控制台中运行激活码$('.useronly').dropdown();，则下拉列表开始工作。这意味着问题不在于jquery代码。

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

PS如果重要的话，我使用Semantic 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-l-g检查整个解决方案。

Answer 1

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

我认为Meteor解决这个问题的方法是使用额外的模板：

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

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

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

登录时重新渲染模板

1 个答案: