更新模板时的流星事件

我正在尝试使用Materialize with Meteor，并且在添加/删除dom中的多媒体文件时如何初始化Materialize javascript，我遇到了一些困难。用户尚未登录时，navbar包含登录/注册功能，当她登录时，会出现包含注销的下拉（需要单独初始化）。因为模板上的rendered仅在第二次登录/注销下拉菜单停止工作后才会被调用一次。更新模板时的流星事件

Template._header.onRendered(function(){ 
    console.log('onRendered'); 
    $(".dropdown-button").dropdown();  
});

和HTML部分

<template name="_header"> 
    <!-- Dropdown Structure --> 
    <ul id="dropdown1" class="dropdown-content"> 
    <li><a href="#!">one</a></li> 
    <li><a href="#!">two</a></li> 
    <li class="divider"></li> 
    <li><a href="#!" data-action="logout"><i class="fa fa-lock left"></i>Sign Out</a></li> 
    </ul> 
    <nav class="light-blue" role="navigation"> 
    <div class="nav-wrapper"> 
     <a href="#!" class="brand-logo">Logo</a> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
     <li><a class="clicker" href="#!">Clicker</a></li> 
     {{#if currentUser}} 
      <li><a href="{{ pathFor 'welcome' }}">Welcome</a></li> 
      <!-- Dropdown Trigger --> 
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li> 
     {{else}} 
      <li><a href="{{ pathFor 'atSignIn' }}">Sign in</a></li> 
      <li><a href="{{ pathFor 'atSignUp' }}">Register</a></li> 
     {{/if}} 
     </ul> 
    </div> 
    </nav> 

</template>

我看了这里的许多问题和帖子在interwebs的其他部分，但我不明白如何模拟template.updated风格的回调，那被称为每时间元素在模板中添加，删除或更改。有任何想法吗？

更新：还有very similar question那里。问题有不同的情况，但解决方案是相同的 - 在单独的模板中有元素。

来源

2015-04-27 Martins Untals

可能重复[Materialize：下拉在“如果”语句不起作用]（http://stackoverflow.com/questions/29815310/materialize-dropdown-in-if-statement-doesnt-work） – saimeunt

可能。我也根据其他问题的评论发布了自己的答案。 –

看起来只有方法是将添加/删除的元素封装在自己的嵌套模板中，然后在此处进行收听。（规定在此comment）

现在我已经改写这样的代码：

Template._header_dropdown.onRendered(function(){  
    console.log('onRenderedDropdown'); 
    $(".dropdown-button").dropdown(); 
});

与HTML部分

<template name="_header"> 

    <nav class="light-blue" role="navigation"> 
    <div class="nav-wrapper"> 
     <a href="#!" class="brand-logo">Logo</a> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
     <li><a class="clicker" href="#!">Clicker</a></li> 
     {{#if currentUser}} 
      <li><a href="{{ pathFor 'welcome' }}">Welcome</a></li> 
      <li><a href="{{ pathFor 'main' }}">Main</a></li> 
      <!-- Dropdown Trigger --> 
      {{> _header_dropdown}} 
     {{else}} 
      <li><a href="{{ pathFor 'atSignIn' }}">Sign in</a></li> 
      <li><a href="{{ pathFor 'atSignUp' }}">Register</a></li> 
     {{/if}} 
     </ul> 
    </div> 
    </nav> 

</template> 

<template name="_header_dropdown"> 
    <!-- Dropdown Structure --> 
    <ul id="dropdown1" class="dropdown-content"> 
    <li><a href="#!">one</a></li> 
    <li><a href="#!">two</a></li> 
    <li class="divider"></li> 
    <li><a href="#!" data-action="logout"><i class="fa fa-lock left"></i>Sign Out</a></li> 
    </ul> 
    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li> 
</template>

和它的作品。并不是很完美的解决方案，但仍然比我使用过的其他许多潜在客户更好。谢谢大家

来源

2015-04-27 21:18:04

更新模板时的流星事件

回答

相关问题