Javascript 具体化：在“中”下拉列表；如果；对账单不存在'；行不通

我试图实现一个下拉列表，它只有在用户登录时才可见。下拉列表在“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>

---

有什么问题吗？

当您的

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

---

有时，将代码重构成更小的子任务不仅仅是一个风格问题，它还可以使事情按预期的方式运行。

对我来说似乎很好……也许问题实际上与if块无关，而你只是认为它与此有关？当将下拉列表（

在“if”中）的定义放在“{/if}”之外时它能工作。可能是Materialize有问题吗？如果你把它放在

{{{if currentUser}}

之前，它还能工作吗？如果不能，那可能是CSS问题……如果它在

if

之前工作，那么它是另外一回事。它总是在

if

之外工作。

Template.dropdown.onRendered(function(){
  this.$(".dropdown-button").dropdown({
    belowOrigin: true // Displays dropdown below the button
  });
});