jQuery issue - why can't this be simple?

help
1

I’m sure I’m doing something very wrong and silly.

I am rendering a page. It shows a list of images. To ensure they are lazy loaded, I’m using the unveil.js jquery plugin (checks if an image is in viewport and swaps a data-src value into the image src).

On initial page load, it works great. I see images. Then I change a reactive session var to let the user switch “categories” — this causes the image collection to change.

Except no images appear, because the re-render means the new set of image values are stuck in data-src. I need to re-run unveil.js after the DOM change.

How on earth is this done in Meteor? How do I know when the Session variable has changed? Or when the image collection has changed? Or the template finished changing (so onRendered is not an option).

(And no, I can’t re-run unveil when I set the Session — that could be a split-second before the DOM actually changed.)

STOP THE MADNESS!

2

You could you run the unveil in an autorun. Look at [Tracker.autorun][1].

When the session gets reset it will trigger the autorun to run again. I imagine it would look something like this.

Template.foo.onRendered(function(){
    var self = this;
    self.autorun(function(){
        Session.get("imageChanged");
        $("img").unveil();

    });
    
});

Template.foo.events({
    'click button':function(){
       Session.set("imageChanged", true);
    }
});

It would be helpful if you could post your code as well.
[1]: http://docs.meteor.com/#/full/tracker_autorun