【问题标题】:Materialize: dropdown in "if" statement doesn't work实现:“if”语句中的下拉菜单不起作用
【发布时间】:2015-07-01 03:48:09
【问题描述】:

我尝试实现一个仅在用户登录时可见的下拉列表。下拉列表在“if”语句之外但不在内部时有效。显示了“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
    });
};

可能是什么问题?

【问题讨论】:

  • 对我来说似乎很好......也许这个问题实际上与 if 块无关,而您只是认为它是?
  • 当把下拉列表的def(
  • in in the "if")放到外面(在"{{/if}}"下面就可以了。难道Materialize有问题?
  • 如果你把它放在{{#if currentUser}}之前,那它还能用吗?如果不是,则可能是 CSS 问题...如果它确实if 之前工作,那么它就是其他问题。
  • 它总是在if之外工作。
  • 标签: javascript html meteor iron-router materialize


    【解决方案1】:

    当您的Template.header.onRendered 生命周期事件第一次触发时,下拉 HTML 元素尚未插入 DOM,因为条件 {{#if currentUser}} 尚未满足(实际登录 Meteor 需要一点时间应用程序,这就是为什么Meteor.user 响应式很方便!)。

    这就是你的 jQuery 下拉菜单初始化失败的原因:DOM 还没有准备好!解决方案非常简单:重构您的空格键代码,将下拉标记放在它自己的单独模板中:

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

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

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签