Using third party javascript package with Meteor

Question

I'm working with Meteor at the moment, and I'm trying to make it look more 'real timey' by adding transitions to numbers as they change. The best third party package I can see for that is http://github.hubspot.com/odometer/.

I'm having trouble getting the package to work in Meteor to update comment numbers on an item.

I've tried putting the javascript into client/compatibility as per the meteor docs: http://docs.meteor.com/#structuringyourapp, but no joy.

The other issue might be that the package uses CSS transitions, which would mean that a re-rendering of the template around the number that is updating would prevent the transition from occurring. To try and fix this problem, I used {{#isolate}} around the number, but that didn't work either.

Has anyone got any other ideas on what else in meteor might be getting in the way?

Answer 1

I think you should try {{#constant}} instead of {{#isolate}}. Also note, that the "constant" part of your template will no longer be reactive, so you'll have to update it manually. Supposing that you have a template

<template name="myTemplate">
    {{#constant}}
    <span class="odometer"></span>
    {{/constant}}
</template>

you will need to do something like this:

Template.myTemplate.rendered = function () {
    var node = this.find('.odometer');
    Deps.autorun(function () {
        node.innerHtml = MyCollection.find({}).count();
    });   
}