0

我正在尝试将 Materialize 与 Meteor 一起使用，并且在从 dom 添加/删除 emelents 时，我遇到了如何初始化 Materialize javascript 的问题。

用例很简单 - 导航栏包含用户未登录时的登录/注册功能，当她登录时，有一个包含注销的下拉列表（需要单独初始化）。在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样式回调，每次在模板中添加、删除或更改元素时都会调用它。有任何想法吗？

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

4

1 回答 1

0

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

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

于 2015-04-27T21:18:04.563 回答