import javascript files into meteor project

Question

I bought a wrapbootstrap theme recently and wanted to convert into meteor project. I have a jquery module js file called "jquery.countTo.js" that I want to import into my meteor project. I am not sure how to do it.

these are the ways I tried:

1. put it inside "compatibility" folder

2. use jquery's getScript to load the js file

   Meteor.startup(function(){ $.getScript('../js/jquery.countTo.js', function(){}); });

3. created a new package and in the package.js file I simply modify the line "api.mainModule()" to api.mainModule('jquery.countTo.js'); However, when I run the project, it crashes when it reads this package, from the error, I am assuming its because my package doesn't know the file jquery.countTo.js depend on jquery. What more should I add to package.js to tell it that it needs to load jquery first.

none of these worked. I think the code might have loaded, but its functionality is not working, its supposed to change the frontend number from 1 to a destionation number you want to display, by using html attributes "data-from" and "data-to" For example, this is in HTML code:

<h2 class="timer mb5" data-from="1" data-to="15381" data-refresh-interval="20">1</h2>

Can someone who have experience incorporating theme into meteor project, Please advise how to deal with js files

Thank you very much!

Answer 1

I used helpers to do something similar to this.

Example: HTML FIle:

<template name="test1">
   <div id="test2">
   Hello World
   </div>
  {{helloworld}}
</template>

JS File:

Template.test1.helpers({
   'helloworld': function(){
      //jquery or javascript code to be rendered
    }});

Template.test1.events({
       "click .test2": function(){
          //jquery or javascript code performed on click
        }});

You should use Templates.test1.rendered({}); and can avoid calling {{helloworld}} in the template.

Alternatively, you can import those files in to the templates you need.