实现：在“if”中下拉菜单声明不起作用 [英] Materialize: dropdown in "if" statement doesn't work

问题描述

我尝试实现了一个只在用户登录时才可见的下拉列表。下拉列表在if语句之外，但不在里面。显示按钮Foo和下拉按钮，但它不会下拉。

header.html

 <！ -  Header  - > 
< template name =header> 
< nav> 
< div class =nav-wrapper> 
< a class =brand-logohref ={{pathFor'home'}}>徽标< / a> 
< ul id =nav-mobileclass =right hide-on-med-and-down> 
 {{#if currentUser}} 
 <！ -  dropdown1 trigger  - > 
< li> 
 < i class =mdi-navigation-more-vert>< / i> 
< / a> 
< / li> 
 
< li>< a href =＃> Foo< / a>< / li> 
 {{else}} 
< li>< a href ={{pathFor'signin'}}>登录< / a>< / li> 
 {{/ if}} 
 
< li>< a href ={{pathFor'about'}}>关于< / a>< / li> 
< / ul> 
< / div> 
< / nav> 
 
 <！ -  dropdown1结构 - > 
< ul id =dropdown1class =dropdown-content> 
< li class =signout>< a href =＃！>退出< / a>< / li> 
< / ul> 
< / template> 
  

header.js

  Template.header.rendered = function（）{
 $（。dropdown-button）。dropdown（{
 belowOrigin：true //显示下拉按钮
}）; 
}; 
  

可能是什么问题？

解决方案

当您的 Template.header.onRendered 生命周期事件首次触发时，下拉HTML元素尚未插入到DOM中，因为条件 {{＃if currentUser}} 尚未满足（实际登录Meteor应用程序前需要一段时间，这就是为什么 Meteor ）。



这就是为什么你的jQuery下拉初始化失败：DOM尚未准备就绪！解决方法非常简单：重构Spacebars代码，将下拉标记放入其自己的单独模板中：



 <模板名称= 下拉菜单 > 
< li> 
 < 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 //显示下拉按钮
}）; 
}）; 
  

有时，将代码重构为更小的子任务不仅仅是风格问题，方式意图。

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屋！