Including Javascript In A Meteor Template

I am very new to meteor and am trying to run a page that makes use of flowplayer video player. Normally all I'd need to do to install flowplayer is add one js and css file to the

Solution 1:

One pure js solution is to load the script in the onRendered Funktion:

Template.yourTemplate.onRendered(function() {
      $(document).ready(function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.src = "REMOTE_SCRIPT_URL";
        $("#script_div").append(script);
      });
});

Or you can use for example meteor-external-file-loader for including the external files.

Solution 2:

If the library exposes only a global var (and not a window global), then you should drop it in the [projectRoot]/client/compatibility special folder, so that Meteor knows it should not wrap the JS file in a separate scope, but include it as an old-fashioned library (similar to a <script> tag).

Solution 3:

You're looking for helpers:

Template.body.helpers({
  tasks: [    
    { text: 'This is task 1' },    
    { text: 'This is task 2' },    
    { text: 'This is task 3' },    
  ],    
});

and in your Template HTML:

<divclass="container"><header><h1>Todo List</h1></header><ul>
      {{#each tasks}}    
        {{> task}}    
      {{/each}}    
    </ul></div>

EDIT: Maybe a better example here:

Template.loaderboard.helpers({
    player: function() {
        return"Hello player";
    },
    videoPlayer: function() {
        return $(".video-player").videoPlayer(); // Pseudo-code
    }
});

and in your HTML:

<template name="leaderboard">
    {{player}}
    {{videoPlayer}}
</template>