Question

我正在与Meteor合作开展一个项目。我尝试使用脚本标记加载javascript文件，但当然这不起作用。我尝试使用脚本标签加载这些相同的文件，我也只是保存为文件并将它们放在lib文件夹中，以便最后加载它们。还有一个内部脚本加载有问题。我甚至尝试删除（function（）{part和关闭部分函数，因为我知道它已经被放入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%';
}*/

}());

Answer 1

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

jQuery.getScript（/yourscript.js）

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

http://www.manuel-schoebel.com/blog/use-meteor-iron-router-waiton-to-load-external-javascript

Answer 2

首先，放置在lib文件夹中的代码将首先加载而不是最后加载（根据docs）。对于内部脚本，请记住每个文件都有自己的作用域，除非您将其放在client/compatability文件夹中，在这种情况下，使用var声明的任何内容都将在全局范围内。为了避免污染全局命名空间，通常最好将模块放在自己的package中，尽管在不打扰智能包格式的情况下基本上可以实现同样的事情，但您只需要记住范围规则（即，使用var声明的任何内容只能在该文件中可见，任何声明没有var的内容都将在全局范围内。）

对于加载外部javascript，放在头部的脚本标签应该可以正常工作，但是如果你需要控制加载顺序，那么你必须要小心一些。您可以inject a script tag into your page using a rendered callback，这是最简单的选项，但更好的解决方案是使用iron-router和waitOn，before或after挂钩。

如何使用Meteor / handlebars.js将js加载到我的模板中？

2 个答案: