javascript - Blaze 渲染完成后操作 DOM

Question

在我的 meteor 应用程序中，我想预加载一个选择选项列表，其中包含我收集的值。

在我的模板中我尝试了这个，它有效:

{{#each items}}
    <p>
        {{value}}
        {{title}}
    </p>
{{/each}}

上面的代码仅代表实际代码的前期版本。然后，我尝试了这个:

<select id="category">
    <option value="" disabled selected>Bitte wählen</option>
    {{#each items}}
      <option value="{{value}}" disabled selected>{{title}}</option>
    {{/each}}
</select>

不幸的是，它不会用任何数据填充列表。

我使用 Materialize 作为 UI 框架，Materialize 所做的是将 select 选项 渲染为 ul li 无序列表，而不是渲染 select option 使用户能够在值之间进行选择。选择选项列表必须按如下方式初始化:

$(document).ready(function() {
  $('select').material_select();   
});

显然，$(document).ready() 将在 blaze 渲染内容完成之前被触发。如何在将选项添加到选择列表后强制运行 Material 初始化？

Answer 1

您正在寻找的是 onRendered方法

Template. category.onRendered(function(){
  //manipulate DOM here
});

有时您需要使用这样的超时。

Template. category.onRendered(function(){
      Meteor.setTimeout(function(){
        //Manipulate DOM here
        // this is most like a hack but it works some of the cases 
      },0);
    });