流星のアプリケーションに生のJavaScriptコードを含める方法

Question

私はHTMLページにアニメーションを作成するJavaScriptを持っています。 Meteorプロジェクトの外では、アニメーションはHTMLファイルに含まれる.jsファイルなので完璧に機能します。どうしたらメテオでも動作させることができますか？ javascriptファイルはまったく動かないようです（何もしていません）。メテオに生のjavscriptファイルを含めることはできますか？そしてもしそうなら、どのように？このファイルは、純粋なJavaScriptであり、ヘルパーやMeteor構造を定義するものではありません。

missionPage.js

var TxtRotate = function(el, toRotate, period) { 
    this.toRotate = toRotate; 
    this.el = el; 
    this.loopNum = 0; 
    this.period = parseInt(period, 10) || 2000; 
    this.txt = ''; 
    this.tick(); 
    this.isDeleting = false; 
}; 

TxtRotate.prototype.tick = function() { 
    var i = this.loopNum % this.toRotate.length; 
    var fullTxt = this.toRotate[i]; 
    if (this.isDeleting) { 
     this.txt = fullTxt.substring(0, this.txt.length - 1); 
    } else { 
     this.txt = fullTxt.substring(0, this.txt.length + 1); 
    } 
    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; 
    var that = this; 
    var delta = 300 - Math.random() * 100; 
    if (this.isDeleting) { delta /= 2; } 
    if (!this.isDeleting && this.txt === fullTxt) { 
     delta = this.period; 
     this.isDeleting = true; 
    } else if (this.isDeleting && this.txt === '') { 
     this.isDeleting = false; 
     this.loopNum++; 
     delta = 500; 
    } 

    setTimeout(function() { 
    that.tick(); 
    }, delta); 
    }; 

    window.onload= function() { 
    console.log('I m here'); 
    var elements = document.getElementsByClassName('txt-rotate'); 
    console.log(elements); 
     for (var i=0; i<elements.length; i++) { 
     var toRotate = elements[i].getAttribute('data-rotate'); 
     var period = elements[i].getAttribute('data-period'); 
     if (toRotate) { 
     new TxtRotate(elements[i], JSON.parse(toRotate), period); 
    } 
    } 
// INJECT CSS 
    var css = document.createElement("style"); 
    css.type = "text/css"; 
    css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 
    }"; 
    document.body.appendChild(css); 
    }; 

missionPage.html

<template name="missionPage"> 
    <div class="ui center aligned container"> 
    <h3>Our story</h3> 
    <h1>This website is 
     <span 
    class="txt-rotate" 
    data-period="2000" 
    data-rotate='[ "not just the website", "simple.", "pure JS.", 
"pretty.", "fun!" ]'></span> 
    </h1> 
    </div> 
</template> 

Answer 1

あなたがGuide to Meteor, specifically the section on app structureを読んでいたことがありますか？そうでなければ、私はそこから始めるだろう。

は、あなたの質問に答えるために：

缶流星は、生のJavaScriptファイルが含まれていますか？

はい。

もしそうなら？

さまざまな方法があります。あなたはそれを直接インポートすることができます。

import './txtRotate.js'; 

それともclient/compatibilityディレクトリに置くことができ、それは他のJSファイルの前にロードされ、実行されます。

最後にmissionPage.jsファイルには、TxtRotateコードではなく、MissionPage Template関連のコードのみが含まれている必要があります。 missionPage.js内にインポート、それ自身のファイル（window.onload一部を除く）にTxtRotateを移動し、テンプレートがレンダリングされたときに、それを初期化：

import { Template } from 'meteor/templating'; 
import './txtRotate.js'; 

Template.missionPage.onRendered(function() { 
    this.$('.txt-rotate').each(function(i, element) { 
    var toRotate = $(element).data('rotate'); 
    var period = $(element).data('period'); 

    if (toRotate) { 
     new TxtRotate(this.get(0), JSON.parse(toRotate), period); 
    } 
    }); 
}); 

---

あなたがreusable Blaze ComponentであるためにあなたのTxtRotate機能を変更されている別のオプションをスタンドアロン機能の代わりに使用できます。次のようなものがあります。

<template name="missionPage"> 
    <div class="ui center aligned container"> 
    <h3>Our story</h3> 
    <h1>This website is {{> TxtRotate period="2000" rotate=words}}</h1> 
    </div> 
</template> 

ここで、wordsはテンプレートヘルパーで定義されます。