CODEWITHSUNDEEP
meteor
Pat
Pat

Reputation: 1208

Using third party javascript package with Meteor

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?

Upvotes: 6

Views: 281

Answers (1)

Tomasz Lenarcik
Tomasz Lenarcik

Reputation: 4880

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();
    });   
}

Upvotes: 1

Related Questions