Initializing a component inside each/with

[droontar]

I have to initialize a dropdown inside a each / with block. The main problem is that it’s not rendered at all. I initialize the component with jQuery, $(’.dropdownClass’).dropdown() and it’s not working. I tried to put the initialization in onRendered, onCreated and forcing it into a HTML script tags.

Moreover, I need to give the dropdown default values from DB, so I need to get the data first from DB and then assign it to the values in the dropdown.

Any tips?

[robfallows]

This thread my help:

Render once I have the data

You are looking at this in a traditional jQuery way. You should be looking at it in a Meteor way, where the select is built reactively. template <template name="picker"> <select> {{#each options as option}} <option value="{{option.value}}">{{option.name}}</option> {{/each}} </select> </template> client: Template.picker.onCreated(function() { this.subscribe('picker'); }); Template.picker.helpers({ options() { return OptionsCollection.find(); } }); server Met…

[droontar]

It helps a bit, but what I’m asking for (maybe I explained bad my problem haha) it’s not to BUILD the component with some data from DB, it’s RENDER the component once another DB is subscribed like:

{{#if Template.subscriptionsReady}}
   {{#each collection1}}
      <script>$('.dropdownClass').dropdown();</script> // This doesn't work
      <select>
          {{#each collection2 as option}} // This works 
              <option value="{{option.value}}">{{option.name}}</option> 
          {{/each}}
      </select>
   {{/each}}
{{/if}}