Render once I have the data


#1

Hi guys:

Im using selectpicker control to load some dropdownlist.

I have realized that these DDL are loaded emtpy sometimes, I believe because it renders when there is no data yet…so, how can i make sure that i have the collection data before rendering ??

At the moment Im using a timeout, but I think that maybe is not so elegant this solution …

//js code:

function renderO(){
$(’.selectpicker’).selectpicker(‘show’);
$(".bs-select-all").html(‘Todas’);
$(".bs-deselect-all").html(‘Ninguna’);
}

Template.searchbox.onRendered(function() {

this.autorun(function© {
if (Operaciones.find().count() > 0) {
setTimeout(renderO,1000);
c.stop();
}
});

});

//html code

TODAS
{{#each operaciones}}
{{descripcion}}
{{/each}}

Is there another way to make that I have the data before rendering? Do I missing something?

thanks a lot…


#2

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

Meteor.publish('picker', function() {
  return OptionsCollection.find( someSearchCriteria );
});

That example uses a Mongo.Collection for the picker options. You could use a REST endpoint, or something else equally well.


Initializing a component inside each/with