在 Blaze 完成渲染后操作 DOM答案

【问题标题】：manipulate DOM after Blaze is done with rendering在 Blaze 完成渲染后操作 DOM
【发布时间】：2016-04-17 08:57:51
【问题描述】：

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

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

{{#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 option 呈现为 ul li 无序列表，而不是呈现 select option 以使用户能够在值之间进行选择。选择选项列表必须初始化如下：

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

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

【问题讨论】：

标签： javascript jquery meteor meteor-blaze materialize

【解决方案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);
    });

【讨论】：