Javascript 如何使用Meteor/handlebar.js将js加载到模板中？_Javascript_Meteor_Handlebars.js

Javascript 如何使用Meteor/handlebar.js将js加载到模板中？

javascript meteor

Javascript 如何使用Meteor/handlebar.js将js加载到模板中？,javascript,meteor,handlebars.js,Javascript,Meteor,Handlebars.js,我正在和Meteor一起做一个项目。我已经尝试过使用脚本标签加载javascript文件，但这当然行不通。我尝试使用脚本标记加载这些文件，我还将它们另存为文件，并将它们放在lib文件夹中，以便最后加载。还有一个内部脚本在加载时出现问题。我甚至尝试删除（function（）{部分并关闭该函数的部分，因为我知道它将被放入Meteor的函数中。如何让下面的代码和其他js文件/脚本在Meteor中正常运行 (function() { // Base template var base_tpl =

我正在和Meteor一起做一个项目。我已经尝试过使用脚本标签加载javascript文件，但这当然行不通。我尝试使用脚本标记加载这些文件，我还将它们另存为文件，并将它们放在lib文件夹中，以便最后加载。还有一个内部脚本在加载时出现问题。我甚至尝试删除（function（）{部分并关闭该函数的部分，因为我知道它将被放入Meteor的函数中。如何让下面的代码和其他js文件/脚本在Meteor中正常运行

(function() {

// Base template
var base_tpl =
        "<!doctype html>\n" +
        "<html>\n\t" +
  "<head>\n\t\t" +
  "<meta charset=\"utf-8\">\n\t\t" +
  "<title>Test</title>\n\n\t\t\n\t" +
  "</head>\n\t" +
  "<body>\n\t\n\t" +
  "</body>\n" +
  "</html>";

var prepareSource = function() {
    var html = html_editor.getValue(),
            css = css_editor.getValue(),
            js = js_editor.getValue(),
            src = '';


    src = base_tpl.replace('</body>', html + '</body>');


     css = '<style>' + css + '</style>';
    src = src.replace('</head>', css + '</head>');


     js = '<script>' + js + '<\/script>';
    src = src.replace('</body>', js + '</body>');

    return src;
 };

 var render = function() {
     var source = prepareSource();

     var iframe = document.querySelector('#output iframe'),
            iframe_doc = iframe.contentDocument;

    iframe_doc.open();
    iframe_doc.write(source);
    iframe_doc.close();
};



var cm_opt = {
    mode: 'text/html',
    gutter: true,
    lineNumbers: true,
};


var html_box = document.querySelector('#html textarea');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);

    html_editor.on('change', function (inst, changes) {
    render();
    });


cm_opt.mode = 'css';
var css_box = document.querySelector('#css textarea');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);

    css_editor.on('change', function (inst, changes) {
    render();
    });


cm_opt.mode = 'javascript';
var js_box = document.querySelector('#js textarea');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);

   js_editor.on('change', function (inst, changes) {
   render();
   });





/*
    Fixing the Height of CodeMirror.
    You might want to do this in CSS instead
    of JS and override the styles from the main
    codemirror.css
*/
var cms = document.querySelectorAll('.CodeMirror');
for (var i = 0; i < cms.length; i++) {

    cms[i].style.position = 'absolute';
    cms[i].style.top = '30px';
    cms[i].style.bottom = '0';
    cms[i].style.left = '0';
    cms[i].style.right = '0';
cms[i].style.height = '100%';
}
/*cms = document.querySelectorAll('.CodeMirror-scroll');
for (i = 0; i < cms.length; i++) {
    cms[i].style.height = '100%';
}*/

}());

（函数（）{
//基础模板
var base_tpl=
“\n”+
“\n\t”+
“\n\t\t”+
“\n\t\t”+
“测试\n\n\t\t\n\t”+
“\n\t”+
“\n\t\n\t”+
“\n”+
"";
var prepareSource=函数（）{
var html=html_editor.getValue（），
css=css\u editor.getValue（），
js=js_editor.getValue（），
src=''；
src=base_tpl.replace（“”，html+“”）；
css=''+css+''；
src=src.replace（“”，css+“”）；
js=''+js+''；
src=src.replace（“”，js+“”）；
返回src；
};
var render=function（）{
var source=prepareSource（）；
var iframe=document.querySelector（“#output iframe”），
iframe_doc=iframe.contentDocument；
iframe_doc.open（）；
iframe_文件写入（来源）；
iframe_doc.close（）；
};
变量cm_opt={
模式：“text/html”，
是的，
行号：对，
};
var html_box=document.querySelector（'html textarea'）；
var html_editor=codemirr.fromTextArea（html_框，cm_opt）；
html_编辑器.on（'change'，函数（inst，changes）{
render（）；
});
cm_opt.mode='css'；
var css_box=document.querySelector（'css textarea'）；
var css_editor=codemirr.fromTextArea（css_框，cm_opt）；
css_编辑器on（'change'，函数（inst，changes）{
render（）；
});
cm_opt.mode='javascript'；
var js_box=document.querySelector（'js textarea'）；
var js_editor=codemirr.fromTextArea（js_框，cm_opt）；
js_editor.on（'change'，函数（inst，changes）{
render（）；
});
/*
固定代码镜像的高度。
您可能希望在CSS中执行此操作
并从主窗口重写样式
codemirror.css
*/
var cms=document.querySelectorAll（'.codemirr'）；
对于（变量i=0；i

您可以将其放在公用文件夹中，然后在需要时，可以使用jQuery的getScript加载它，如下所示：

jQuery.getScript（/yourscript.js）

编辑：如果您使用的是Iron Router，并且并不总是需要加载javascript（或者在呈现模板之前需要加载javascript），我推荐Manuel Schoebel的这个聪明的解决方案：

您可以将它放在公用文件夹中，然后在需要时，可以使用jQuery的getScript加载它，如下所示：

jQuery.getScript（/yourscript.js）

编辑：如果您使用的是Iron Router，并且并不总是需要加载javascript（或者在呈现模板之前需要加载javascript），我推荐Manuel Schoebel的这个聪明的解决方案：

首先，放置在

lib

文件夹中的代码将首先加载，而不是最后加载（根据）。对于内部脚本，请记住每个文件都有自己的作用域，除非您将其放在

客户机/compatibility

文件夹中，否则在这种情况下，使用

var

声明的任何内容都将在全局作用域中。为了避免污染全局命名空间，通常最好将您的模块放在您自己的文件夹中，尽管同样的事情也很重要要在不使用智能包格式的情况下实现这一点，您只需记住范围规则（即，使用

var

声明的任何内容都将仅在该文件中可见，使用

var

声明的任何内容都将在全局范围内）

对于加载外部javascript，放在头部的脚本标记应该可以正常工作，但如果需要控制加载顺序，则必须更加小心。您可以选择其中一种，这是最简单的选择，但更好的解决方案是使用，

waitOn

、

before

或

after

挂钩。

首先，code>放置在

lib

文件夹中的文件将首先加载，而不是最后加载（根据）。对于内部脚本，请记住每个文件都有自己的作用域，除非您将其放在

客户机/compatibility

文件夹中，否则在这种情况下，使用

var

var

声明的任何内容都将仅在该文件中可见，使用

var

声明的任何内容都将在全局范围内）

对于加载外部javascript，放置在头部的脚本标记应该可以正常工作，但如果需要控制加载顺序，则必须更加小心。您可以选择其中之一，这是最简单的选择，但更好的解决方案是使用和

waitOn

、

before

或

after

挂钩