更新模板时的流星事件

Question

我正在尝试将 Materialize 与 Meteor 一起使用，当 adding/removing 来自 dom 时，我遇到了如何初始化 Materialize javascript 的问题。

用例很简单 - 导航栏包含 login/register 用户未登录时的功能，当她登录时，有一个包含注销的下拉列表（需要单独初始化）。因为模板上的 rendered 在第二个 login/logout 下拉列表停止工作后仅被调用一次。

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>

我在这里阅读了很多问题，也阅读了互联网其他部分的帖子，但我不明白如何模拟 template.updated 样式回调，每次添加、删除或更改元素时都会调用它在模板中。有什么想法吗？

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

Answer 1

看起来唯一的方法是将 added/removed 元素包装在它自己的嵌套模板中，然后在那里监听 onRendered。（按此规定）

现在我重写了这样的代码：

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>

并且有效。不是很巧妙的解决方案，但仍然比我在谷歌上搜索过的许多其他线索要好得多。谢谢大家

更新模板时的流星事件

Meteor event when template is updated

javascript

jquery

materialize

meteor