MeteorJS: Callback after template helper was updated

Question

I'm new to Meteor.js, so hopefully this is an inability on my part rather than a limitation of the platform because it's pretty amazing otherwise.

What I'm trying to achieve is pretty straightforward: run Javascript whenever a template helper gets updated with new data (but not from the db!).

A simple example scenario could be this: A user makes a request to get some images. But rather than the images just "popping up", they should be hidden and fadein once they've been fully loaded (among other things like positioning them, etc.).

In other words, right after the helper receives new data, a function should run to do something with that data (that can not be done on the server before it is actually rendered).

If the data is from a collection, it's quite easy to achieve this with a subscribe callback.

However, there seems to be no callback for once a helper has rendered the new data.

Yes, it's possible to add a timeout of a few ms, but that's not a clean or reliable solution in my mind, because you obviously never know exactly how long it will need to render.

I've searched through dozens of seemingly related posts, but was not able to find anything that could be considered a "standard" way of achieving this...

Here's a bit of (simplified) example code to illustrate the scenario:

var images = [];


//When showImages is updated with new data from the images array...
Template.gallery.helpers({

    showImages: function () {
        return images;
    }
});

//...this function should fire
function doMagicWork () {
    ...
}


//Because firing it on the on click event would be too soon,
//as the helper hasn't rendered yet
Template.gallery.events({

    "click #fetch_images": function (event) {

        Meteor.call("getImagesFromServer", function(error, result) {

            images = result.content;

        });
    }
});

Answer 1

There is a pending feature for adding animation/transition support for UI changes (referenced here)

As an interim solution, you can use Blaze UI hooks. There are quite a few packages that use them. example here and here

In general, , Meteor way is to reduce the amount of boiler plate code. Smooth transition is something of a pattern rather than an individual thing for element and should be treated as such as per meteor philosophy.