Waiting For Meteor Collection To Finish Before Next Step

I have a Meteor template that should be displaying some data. Template.svg_template.rendered = function () { dataset_collection = Pushups.find({},{fields: { date:1, data:1 }},

Solution 1:

You are right, you should ensure that code depending on fetching the content of a client-side subscribed collection is executed AFTER the data is properly loaded.

You can achieve this using a new pattern introduced in Meteor 1.0.4 : https://docs.meteor.com/#/full/Blaze-TemplateInstance-subscribe

client/views/svg/svg.js

Template.outer.onCreated(function(){
  // subscribe to the publication responsible for sending the Pushups// documents down to the clientthis.subscribe("pushupsPub");
});

client/views/svg/svg.html

<template name="outer">
  {{#if Template.subscriptionsReady}}
    {{> svgTemplate}}
  {{else}}
    Loading...
  {{/if}}
</template>

In the Spacebars template declaration, we use an encapsulating outer template to handle the template level subscription pattern. We subscribe to the publication in the onCreated lifecycle event, and we use the special reactive helper Template.subscriptionsReady to only render the svgTemplate once the subscription is ready (data is available in the browser). At this point, we can safely query the Pushups collection in the svgTemplateonRendered lifecycle event because we made sure data made its way to the client :

Template.svgTemplate.onRendered(function(){
  console.log(Pushups.find().fetch());
});

Alternatively, you could use the iron:router (https://github.com/iron-meteor/iron-router), which provides another design pattern to achieve this common Meteor related issue, moving subscription handling at the route level instead of template level.

Add the package to your project :

meteor add iron:router

lib/router.js

Router.route("/svg", {
  name: "svg",
  template: "svgTemplate",
  waitOn: function(){
    // waitOn makes sure that this publication is ready before rendering your templatereturn Meteor.subscribe("publication");
  },
  data: function(){
    // this will be used as the current data context in your templatereturn Pushups.find(/*...*/);
  }
});

Using this simple piece of code you'll get what you want plus a lot of added functionalities. You can have a look at the Iron Router guide which explains in great details these features.

https://github.com/iron-meteor/iron-router/blob/devel/Guide.md

EDIT 18/3/2015 : reworked the answer because it contained outdated material and still received upvotes nonetheless.

Solution 2:

This is one of those problems that I really wish the basic meteor documentation addressed directly. It's confusing because:

1. You did the correct thing according to the API.
2. You get errors for Deps which doesn't point you to the root issue.

So as you have already figured out, your data isn't ready when the template gets rendered. What's the easiest solution? Assume that the data may not be ready. The examples do a lot of this. From leaderboard.js:

Template.leaderboard.selected_name = function () {
    var player = Players.findOne(Session.get("selected_player"));
    return player && player.name;
};

Only if player is actually found, will player.name be accessed. In coffeescript you can use soaks to accomplish the same thing.

saimeunt's suggestion of iron-router's waitOn is good for this particular use case, but be aware you are very likely to run into situations in your app where the data just doesn't exist in the database, or the property you want doesn't exist on the fetched object.

The unfortunate reality is that a bit of defensive programming is necessary in many of these cases.

Solution 3:

Using iron-router to wait on the subscription works, but I like to keep subscriptions centrally managed in something like a collections.js file. Instead, I take advantage of Meteor's file load order to have subscriptions loaded before everything else.

Here's what my collections.js file might look like:

// ****************************** Collections **********************************
Groups = new Mongo.Collection("groups");

// ****************************** Methods **************************************
myGroups = function (userId) {
  return Groups.find({"members":{$elemMatch:{"user_id":userId}}});
};

// ****************************** Subscriptions ********************************
if(Meteor.isClient){
  Meteor.subscribe("groups");
}

// ****************************** Publications *********************************
if(Meteor.isServer){
  Meteor.publish("groups", function () {
    return myGroups(this.userId);
  });
}

I then put collections.js into a lib/ folder so that it will get loaded prior to my typical client code. That way the subscription is centralized to a single collections.js file, and not as part of my routes. This example also centralizes my queries, so client code can use the same method to pull data:

var groups = myGroups(Meteor.userId());