Including javascript in a meteor template

Question

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 page.

I've added these files to the /public folder and added links to them in the head. The files appear on the page but the player does not appear as normal - it seems as though in page javascript doesn't run as it would in a standard page.

Answer 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.

Answer 2

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:

  <div class="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>

Answer 3

如果库仅露出一个全球性的var （而不是全球的窗口），那么你就应该放弃它的[projectRoot]/client/compatibility特殊的文件夹，让流星知道它不应该包裹在一个单独的范围JS文件，但将其作为老式库包含（类似于<script>标记）。