Materialise："if" 语句中的下拉菜单不起作用

Question

我尝试实现一个下拉列表，该列表仅在用户登录时可见。下拉列表在 "if" 语句外部但不在内部时有效。显示了按钮 "Foo" 和下拉按钮，但未显示 "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
    });
};

可能是什么问题？

Answer 1

当您的 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
  });
});

有时将您的代码重构为更小的子任务不仅仅是样式问题，而是让事情按预期方式工作。

Materialise："if" 语句中的下拉菜单不起作用

Materialize: dropdown in "if" statement doesn't work

html

javascript

materialize

meteor

iron-router