javascript - 登录时重新渲染模板

Question

在导航栏中，我有 2 个下拉菜单，其中一个仅在用户登录时才可用(否则我用 {{#if currentUser}} 隐藏它)。

要使下拉菜单正常工作，应使用 jquery 激活它，如下所示:$('.somedropdown').dropdown();。

在 meteor 中:

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(); } }); };

但是它不起作用。

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

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

PS 如果有必要提一下，我使用 Semantic UI 下拉模块 http://semantic-ui.com/modules/dropdown.html (这就是jquery激活码的来源)。

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

感谢您提前提供的任何帮助。

解决方案

通过将 console.logs 添加到上面提到的代码中，我发现自动运行实际上有效，但 jquery 代码在下拉列表实际呈现之前运行。所以我将 autorun 函数包装到 Meteor.setTimeout() 中:

Template.header.rendered = function () { //激活始终可用的 .guest 下拉列表 这.$('.guest') 。落下(); //如果用户登录则激活 .useronly 下拉列表 this.autorun(function() { if(Meteor.userId()) { Meteor.setTimeout(function() { //添加 0 延迟只是为了将其最后添加到事件循环中 $('.useronly') 。落下(); }, 0); } }); };

PS 还通过 https://stackoverflow.com/users/2104665/peppe-l-g 检查更简洁的解决方案在答案中。

Answer 1

我猜测您的自动运行会在模板中的 {{#if currentUser}} block 更新之前运行，这意味着 $('.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();
}