在流星模板中包含javascript

Question

我對流星非常陌生，並且試圖運行一個使用流水遊戲視頻播放器的頁面。

通常我需要做的安裝流式播放器是添加一個js和css文件到頁面。

我已經將這些文件添加到/ public文件夾，並在頭部添加了鏈接。這些文件出現在頁面上，但播放器不會像正常一樣顯示 - 看起來好像頁面中的javascript不像在標準頁面中那樣運行。

Answer 1

如果庫僅露出一個全球var（而不是一個窗口全局的），那麼你就應該放棄它在[projectRoot]/client/compatibility特殊的文件夾，以便流星知道它不應該包裹在一個單獨的範圍JS文件，但它包含作爲一個老式的圖書館（類似於<script>標籤）。

Answer 2

您正在尋找幫手：

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

，並在你的HTML模板：

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

編輯：也許一個更好的例子在這裏：

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

和您的HTML：

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

Answer 3

一個純JS的解決方案是加載腳本在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); 
     }); 
}); 

或者你可以使用例如meteor-external-file-loader用於包括外部文件。