meteor dyanmic dropdown dosen't work

I'am using Semantic-Ui. Now I have problems with the dropdown.

The Dropdown get populated dynamically with values from the minimongo.

When I do $('.menu').dropdown() in myTemplate.rendered it thinks the Dropdown is empty and it doesn't work but when i put it in dropdowntListItems.rendered it get called N times. N is the count() of the items.

This solution works. Is there a better solution for that?

//myTemplate  <div class="menu">   {{#each dropdowntList}}   {{> dropdowntListItems}}   {{/each}}   </div>     <template name="dropdowntListItems">   <div class="item">{{item}}</div>   </template>

Template.myTemplate.dropdowntList = function (){   return Items().fetch();  };    Template.dropdowntListItems.rendered = function(){   $('.menu').dropdown(); //gets called N times  }; 

Answer

What you did is the good solution. Since Blaze has been released, the rendered callback is only triggered once.

In Template.myTemplate.rendered, the dropdown is empty because the rendered callback is triggered before Items().fetch() in Template.myTemplate.dropdownList is completely run. Besides, when a new item is added, another problem would be that the dropdown will not be updated.

Avital, who is part of the MDG and have worked on the new Blaze engine, have uploaded two different solutions on how to achieve the same behavior as the old rendered callback (before Blaze).

By adding a new helper.

<template name="dropdowntListItems">   <div class="menu">   {{#each dropdowntList}}   {{item}}   {{/each}}   </div>  </template>      Template.myTemplate.item = function (){   $('.menu').dropdown();  };

By Wrapping the contents of #each in a template. (what you did)

Template.dropdowntListItems.rendered = function(){   $('.menu').dropdown(); //gets called N times  };