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

Question

I'm working on a project with Meteor. 我正在与Meteor合作一个项目。 I've tried loading javascript files using script tags but of course that won't work. 我试过使用脚本标签加载javascript文件，但是当然不起作用。 These same files I've tried loading using script tags, I've also just saved as files and placed them in the lib folder so they could be loaded last. 我尝试使用脚本标签加载这些文件，也将它们另存为文件并将它们放置在lib文件夹中，以便最后加载它们。 There is also an internal script that has issues loading. 还有一个内部脚本加载有问题。 I even tried removing the (function(){ part and closing part of the function because I know it'll already be placed into a function with Meteor. How can I get the code below and other js files/scripts to run properly with Meteor? 我什至尝试删除函数的（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%';
}*/

}());

Answer 1

You can place it in the public folder and then whenever you need it, you can load it using jQuery's getScript as in: 您可以将其放置在公用文件夹中，然后在需要时使用jQuery的getScript加载它，如下所示：

jQuery.getScript( /yourscript.js) jQuery.getScript（/yourscript.js）

EDIT: If you are using Iron-Router and the javascript is not always required to load (or it IS required to load before the template is rendered) I recommend this clever solution by Manuel Schoebel: 编辑：如果您使用的是Iron-Router，并且并非总是需要加载javascript（或者在呈现模板之前需要加载javascript），我推荐Manuel Schoebel提出的这个聪明的解决方案：

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

Answer 2

Firstly, code placed in the lib folder will be loaded first as opposed to last (as per the docs ). 首先，放置在lib文件夹中的代码将首先加载，而不是最后加载（按照docs ）。 For internal scripts, bear in mind that each file has its own scope, unless you put it in the client/compatability folder, in which case anything declared with var will be in global scope. 对于内部脚本，请记住，每个文件都有其自己的作用域，除非将其放在client/compatability文件夹中，在这种情况下，用var声明的任何内容都将在全局作用域中。 To avoid polluting the global namespace, it's often better to put your modules in your own package , although the same thing can essentially be achieved without bothering with the smart package format, you just need to bear in mind the scoping rules (ie that anything declared with var will only be visible within that file, anything declared without var will be in global scope). 为了避免污染全局名称空间，通常最好将模块放在自己的程序包中，尽管基本上可以在不影响智能程序包格式的情况下实现相同的操作，但您只需要记住范围规则（即，声明的任何内容）使用var只会在该文件中可见，任何不使用var声明的内容都将在全局范围内）。

For loading external javascript, script tags placed in the head should work fine, but if you need to control the loading order then you have to be a bit more careful. 对于加载外部javascript，放在头部的脚本标签应该可以正常工作，但是如果您需要控制加载顺序，则必须多加注意。 You can either inject a script tag into your page using a rendered callback , which is the simplest option, but a nicer solution is to use iron-router and the waitOn , before or after hooks. 您可以使用rendered回调方法（这是最简单的选择）将脚本标签注入到页面中，但是更好的解决方案是after钩子before或after使用iron-router和waitOn 。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-02-11 22:13:09

解决方案2
1 2014-02-11 22:15:26

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-02-11 22:13:09

解决方案2 1 2014-02-11 22:15:26

解决方案1
3 已采纳 2014-02-11 22:13:09

解决方案2
1 2014-02-11 22:15:26