登錄時重新渲染模板

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