Template.subscriptionsReady when loading Select List still doesn't always populate select options

help
1

I have an app I’ve been making for a couple of years not and I am using the Materialize library to style it.

I have a select box on one view that I’m populating from a collection, but noticed it didn’t always populate before page load.

I’ve added a Template.subscriptionsReady #if block around the template reference, but it still doesn’t always get the select options populated before the page loads more times than not.

Right now, I’m putting a setTimeout around the jquery portion of the Materialize select setup in the Template.<name>.onRendered section, but I feel like that’s pretty hacky.

Any thoughts on what I might need to do to give the select options time to populate before displaying the template to the user?

2

I use a “ready” ReactiveVar in almost all of our templates. The subscriptionsReady call isn’t really that helpful in my opinion once your template evolves beyond just the basic loading and displaying of data.

Basic example:

<template name="myTemplate">
  {{#if ready}}
    <!-- template code -->
  {{/if}}
</template>

And then:

Template.myTemplate.onCreated(function() {
  const self = this;
  self.readyVar = new ReactiveVar(false);
  self.autorun(function() {
    // Call some api or wait for data from a subscription
    // In your case, something like:
    const optionsSub = self.subscribe('options');
    const options = Options.find();
    if (optionsSub.ready && options.length > 0) { // This can be as complicated as necessary to ensure you have what you need
      self.readyVar.set(true);
  });
});

// I usually use a global helper, but you could scope this
// helper to your template
Template.registerHelper('ready', function() {
  return Template.instance().readyVar.get();
});
1 Like
3

Awesome! I’ll definitely be giving this a try! Thanks so much.