Using a third-party javascript package with Meteor

Question

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

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

I tried putting javascript in client / compatibility as per meteor docs: http://docs.meteor.com/#structuringyourapp , but without joy.

Another problem may be that the package uses CSS transitions, which would mean that re-rendering the template around the number that is being updated will prevent the transition from occurring. To fix this problem, I used {{#isolate}} around the number, but that didn't work either.

Does anyone have any other ideas on what else the meteor could interfere with?

Answer 1

I think you should try {{#constant}} instead of {{#isolate}} . Also note that the “permanent” part of your template will no longer respond, so you will have to update it manually. Suppose 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(); }); }