我尝试实现一个只有在用户登录后才能看到的下拉列表。下拉列表在"如果"之外的情况下有效。声明但不在里面。按钮" Foo"和下拉按钮显示,但它没有"下拉"。
了header.html
<!-- Header -->
<template name="header">
<nav>
<div class="nav-wrapper">
<a class="brand-logo" href="{{pathFor 'home'}}">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
{{#if currentUser}}
<!-- dropdown1 trigger -->
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1">
<i class="mdi-navigation-more-vert"></i>
</a>
</li>
<li><a href="#">Foo</a></li>
{{else}}
<li><a href="{{pathFor 'signin'}}">Sign in</a></li>
{{/if}}
<li><a href="{{pathFor 'about'}}">About</a></li>
</ul>
</div>
</nav>
<!-- dropdown1 structure -->
<ul id="dropdown1" class="dropdown-content">
<li class="signout"><a href="#!">Sign out</a></li>
</ul>
</template>
header.js
Template.header.rendered = function () {
$(".dropdown-button").dropdown({
belowOrigin: true // Displays dropdown below the button
});
};
可能是什么问题?
答案 0 :(得分:5)
当您的Template.header.onRendered
生命周期事件首次被触发时,下拉HTML元素尚未插入到DOM中,因为尚未满足条件{{#if currentUser}}
(实际需要花费一些时间登录Meteor应用程序,这就是Meteor.user
被动反应的原因!)。
这就是你的jQuery下拉列表初始化失败的原因:DOM还没有准备好!解决方案非常简单:重构您的Spacebars代码,将下拉标记放在自己的单独模板中:
<template name="dropdown">
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1">
<i class="mdi-navigation-more-vert"></i>
</a>
</li>
<li><a href="#">Foo</a></li>
</template>
然后在您的标题模板中插入子模板:
{{#if currentUser}}
{{> dropdown}}
{{else}}
{{! ... }}
{{/if}}
这样下拉列表将有自己的onRendered
生命周期事件,只有在用户登录后才会触发,此时下拉DOM就会准备就绪。
Template.dropdown.onRendered(function(){
this.$(".dropdown-button").dropdown({
belowOrigin: true // Displays dropdown below the button
});
});
有时将代码重构为较小的子任务并不仅仅是一种风格问题,而是使事情按照预期的方式运行。