JHolub JHolub - 1 year ago 186
Javascript Question

Meteor Subscriptions ready not working

I've searched and tried for hours but I couldn't come up with any solution for this.

I am writing a Music applications that plays songs from YouTube on a server. I am downloading the Thumbnail and storing it in a cfs:collection (because I need a gaussian blur version of it later).

My publish method looks like the following:

Meteor.publish('currentSong', function() {
return [Playlist.find({'position': 0}), Thumbnails.find()];

I had a version which published only the Thumbnail of the current song, but that caused even more problems.

In my Templates onCreated method I subscribe to that (among various other things). I've tried both within a
method and outside of one.

Template.controlpanel.onCreated(function() {
// subscribe to the publications

And then I have a Template helper retrieving the URL of the Thumbnail to actually display it within a
<img src="<url>" />

getThumbnail: function() {
var thumbnail = this.thumbnail.getFileRecord();
return thumbnail.url({'store': 'Thumbnail'});

Since I was asked for some more Code, here is a snippet from the actual Template

{{#with currentSong}}
<div id="ThumbnailDisplay">
<img src="{{getThumbnail}}" alt="{{title}} Thumbnail" id="thumbnail">

Where currentSong only returns one database entry, listening to the following schema:

PlaylistSchema = new SimpleSchema({
title: {
type: String,
label: "titlename"
url: {
type: String,
label: "titleurl"
duration: {
type: Number,
label: "duration"
file: {
type: String,
label: "filepath",
optional: true
position: {
type: Number,
label: "postion"
// id to the Thumbnail CFS Collection object
thumbnail: {
// type: String,
type: FS.File,
label: "thumbnail"

Here you can see, that
in the context of
{{#with currentSong}}
refers to a FS.File object storing both the Thumbnail and its gaussian blur version.

The Problem is, that when the Template is already loaded and it is switching from one song to another, it works without any Problem. But when there is no song in my playlist, the display part is invisible (The Template is technically rendered, but all the information is inside a
{{#with currentSong}}
Block). And when I insert a song, the display "pops up" and everything is displayed (song title, duration slider and so on) except for the Thumbnail. Once I reload the page, it is there.

I am subscribing to the collection. I check weather the subscriptions are ready or and still it is not working.

I have some other parts in my application where I subscribe in an onCreated context, and still have to use setTimeout
(function(), 100)
, because otherwise the data is not available yet.

I am pretty sure that the Problem lies in front of the screen, that I am missing something or don't fully understand Meteor's subscriptions and which part is reactive or not. But I just don't get it. You help would be much appreciated.

One thing to note is, that I am aware of iron-router and its capabilities. I have used it in another project of mine. But this app is a sole one page applications having no need for routes at all. So I'd like to restrain from using it.

Answer Source

So after playing around a little more the problem basically is, that the subscriptions are ready, but the CollectionFS files are not.

My solution was now, that I have my helper, reactively setting the correct URL, which always works except when the Template is first rendered.

To tackle that Problem I have an autorun function which changes the image whenever the song changes.

this.autorun(function() {
        var currentSong = Playlist.findOne({'position': 0});
        if(currentSong ){
            var thumbnail = currentSong.thumbnail.getFileRecord();
            $('#thumbnail').attr('src', thumbnail.url());

It probably is not the ideal solution but it works. For some reason subscriptionReady and CollectionFS do not seem to work together very well.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download