manipulate DOM after Blaze is done with rendering

Question

In my meteor application I want to preload a select option list with values from my collection.

In my template I tried this, which works:

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

The above code represents just an pre stage version of the actual code. Then, I tried this:

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

Unfortunately, it won't fill the list with any data.

I'm using materialize as UI framework, and what materialize would do is rendering the select option as a ul li unordered list instead of rendering the select option to make the user able to choose between the values. The select option list has to be initialized as follow:

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

Apparantely, $(document).ready() will be fired before blaze is done with rendering the contents. How can I force the material initialization to be run just after blaze is done adding the options to the select list?

Answer 1

What are you looking is the onRendered method

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

Sometimes you will need to use a timeout like this.

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