Question

我正在尝试将物质化与Meteor一起使用，当我从dom添加/删除emelents时，我已经遇到了如何初始化Materialise 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>

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

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

Answer 1

看起来唯一的方法是将添加/删除的元素包装在自己的嵌套模板中，然后在那里监听onRendered。（按照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>

它有效。不是很整洁的解决方案，但仍然比我用Google搜索的许多其他潜在客户要好得多。谢谢大家

模板更新时的Meteor事件

1 个答案: