如何使用Meteor / handlebars.js将js加载到我的模板中？ [英] How can I load js into my templates with Meteor/handlebars.js?
问题描述
$ p $
（function（）{
//基本模板
var base_tpl =
<！doctype html> \\\
+
< html> \\\
\t+
< head> \\\
\t\t +
< meta charset = \utf-8 \> \\\\\+
< title> Test< / title> \ +
< / head> \\\
\t+
< body> \ n\ t \\\
\t+
< / body> \\\
+
< / html>;
var prepareSource = function（） {
var html = html_editor.getValue（），
css = css_editor.getValue（），
js = js_editor.getValue（），
src ='';
src = bas e_tpl.replace（'< / body>'，html +'< / body>'）;
css ='< style>'+ css +'< /风格>';
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）;
$ b $ 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（）;
}）;
/ *
修复CodeMirror的高度。
您可能希望在CSS中执行此操作，而不是JS中的
，并覆盖主
中的样式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％';
} * /
}（））;
您可以将它放在公用文件夹中，你需要它，你可以使用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
I'm working on a project with Meteor. I've tried loading javascript files using script tags but of course that won't work. 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. 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() {
// 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%';
}*/
}());
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( /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:
http://www.manuel-schoebel.com/blog/use-meteor-iron-router-waiton-to-load-external-javascript
这篇关于如何使用Meteor / handlebars.js将js加载到我的模板中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
