实现:“if"中的下拉菜单声明不起作用 [英] Materialize: dropdown in "if" statement doesn't work
问题描述
我尝试实现一个仅在用户登录时可见的下拉列表.下拉列表在if"语句之外但不在内部时有效.显示了按钮Foo"和下拉按钮，但它没有下拉".
header.html
<模板名称=标题"><导航><div class="nav-wrapper"><a class="brand-logo" href="{{pathFor 'home'}}">标志</a><ul id="nav-mobile" class="right hide-on-med-and-down">{{#if currentUser}}<!-- dropdown1 触发器--><li><a class="dropdown-button" href="#!"数据激活=dropdown1"><i class="mdi-navigation-more-vert"></i></a><li><a href="#">Foo</a></li>{{别的}}<li><a href="{{pathFor 'signin'}}">登录</a></li>{{/如果}}<li><a href="{{pathFor 'about'}}">关于</a></li></nav><!-- dropdown1 结构--><ul id="dropdown1" class="dropdown-content"><li class="signout"><a href="#!">退出</a></li>
header.js
Template.header.rendered = function () {$(".dropdown-button").dropdown({belowOrigin: true//在按钮下方显示下拉菜单});};可能是什么问题?
当您的 Template.header.onRendered 生命周期事件第一次被触发时，下拉 HTML 元素尚未插入到 DOM 中，因为条件 {{#if currentUser}} 尚未满足(在实际登录 Meteor 应用程序之前需要花费少量时间，这就是 Meteor.user 反应性的原因很方便！).
这就是你的 jQuery 下拉初始化失败的原因:DOM 还没有准备好！解决方案很简单:重构你的空格键代码，将下拉标记放在它自己单独的模板中:
<li><a class="dropdown-button" href="#!"数据激活=dropdown1"><i class="mdi-navigation-more-vert"></i></a><li><a href="#">Foo</a></li>然后在您的标题模板中插入子模板:
{{#if currentUser}}{{>落下}}{{别的}}{{!... }}{{/如果}}这样下拉菜单就会有自己的onRendered生命周期事件，只有在用户登录后才会触发，此时下拉DOM就准备好了.
Template.dropdown.onRendered(function(){this.$(".dropdown-button").dropdown({belowOrigin: true//在按钮下方显示下拉菜单});});有时将代码重构为更小的子任务不仅是风格问题，还能让事情按预期方式工作.
I tried to implement a dropdown list that is only visible when the user is signed in. The dropdown list works when outside the "if" statement but not inside. The buttons "Foo" and dropdown button are shown, however it doesn't "dropdown".
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
});
};
What could be the problem?
When your Template.header.onRendered lifecycle event is first fired, the dropdown HTML elements are not yet inserted into the DOM because the condition {{#if currentUser}} is not yet met (it takes a small amount of time before being actually logged in a Meteor app, that's why Meteor.user being reactive is handy !).
This is why your jQuery dropdown initialization fails : the DOM is not yet ready ! The solution is quite simple thoug : refactor your Spacebars code to put the dropdown markup in its own separate template :
<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>
Then insert the child template inside your header template :
{{#if currentUser}}
{{> dropdown}}
{{else}}
{{! ... }}
{{/if}}
This way the dropdown will have its own onRendered lifecycle event that will get triggered only after the user is logged in, and at this time the dropdown DOM will be ready.
Template.dropdown.onRendered(function(){
this.$(".dropdown-button").dropdown({
belowOrigin: true // Displays dropdown below the button
});
});
Sometimes refactoring your code into smaller subtasks is not just a matter of style, but it makes things work the way intended.
这篇关于实现:“if"中的下拉菜单声明不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
