Ben*_*uer 8 javascript templates external mustache hogan.js
我使用Hogan.JS作为JavaScript模板库.它应该从外部文件加载JavaScript模板.人们可以在外部JavaScript文件中外包几个模板.
有谁知道这是怎么做到的吗？
我有以下代码示例:
<!DOCTYPE html>
<html>
<head>
<title>Hogan.JS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/hogan-2.0.0.min.js"></script>
<script id="scriptTemplate" type="text/mustache">
<p>Your text here: {{text}}</p>
</script>
</head>
<body>
<script>
var data = {
text: 'Hello World'
};
var template = $('#scriptTemplate').html();
var compiledTemplate = Hogan.compile(template);
var renderedTemplate = compiledTemplate.render(data);
var box = document.createElement('div');
box.innerHTML = renderedTemplate;
document.body.insertBefore(box,document.body.childNodes[0]);
</script>
</body>
</html>
使用ID我可以解决模板,但我总是需要一个单独的内联脚本.:-(
这如何与外部文件一起使用？
Phu*_*ong 28
您有两种方法可以加载外部模板:
不幸的是,预编译Hogan.js模板的文档是不存在的.如果你有一个Github仓库的副本,那么在bin目录里面就会有一个叫做的脚本hulk来完成这项任务.它需要nodejs以及一些安装的npm模块(即nopt和mkdirp).
一旦nodejs安装了这些模块,给定一个模板文件Test.hogan:
<p>Your text here: {{text}}</p>
您可以使用以下命令预编译脚本:
hulk Test.hogan
导致以下文字:
if (!!!templates) var templates = {};
templates["Test"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<p>Your text here: ");t.b(t.v(t.f("text",c,p,0)));t.b("</p>");return t.fl(); },partials: {}, subs: { }});
将其保存到名为的文件中 templates.js
现在在HTML页面中,您将加载该templates.js文件,并创建一个全局对象templates,其中编译的模板函数位于键"Test"中.您也可以省略hogan.js文件,因为那是编译器(现在您的模板已经预编译),只需包含template.js分发中的文件.
<!DOCTYPE html>
<html>
<head>
<title>Hogan.JS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/template.js"></script>
<script src="js/templates.js"></script>
</head>
<body>
<script>
var data = {
text: 'Hello World'
};
var compiledTemplate = templates['Test'];
var renderedTemplate = compiledTemplate.render(data);
var box = document.createElement('div');
box.innerHTML = renderedTemplate;
document.body.insertBefore(box,document.body.childNodes[0]);
</script>
</body>
</html>
注意:我确实在使用masterGithub repo 的当前分支时遇到了一些问题,因为它生成的模板使用的构造函数与2.0.0模板版本中使用的构造函数不同.如果使用,请hulk务必使用template.js文件lib夹中的文件.
或者,您可以使用require.js和文本插件.下载它们并将它们保存到您的js文件夹中.然后,您需要添加一个require语句来加载模板文本:
<!DOCTYPE html>
<html>
<head>
<script src="js/hogan-2.0.0.js"></script>
<script src="js/require.js"></script>
</head>
<body>
<script>
var data = {
text: 'Hello World'
};
require(['js/text!Test.hogan'], function(testHoganText) {
// testHoganText contains the text of your template
var compiled = Hogan.compile(testHoganText);
var renderedTemplate = compiled.render(data);
var box = document.createElement('div');
box.innerHTML = renderedTemplate;
document.body.insertBefore(box,document.body.childNodes[0]);
});
</script>
</body>
</html>
小智 5
如果您不使用节点,或者您想依赖require.js,还有另一种方法可以很好地工作
您只需使用jQuery $ .get来获取模板文件的路径即可.所以一个例子看起来像这样:
$.get('templates/book.hogan', function(templates){
var extTemplate = $(templates).filter('#book-tpl').html();
var template = Hogan.compile(extTemplate);
var rendered = template.render(datum);
$('.marketing').append(rendered);
});
模板可以只是一个.html文件(我只是使用.hogan),模板中的所有html都应该包含在一个带有唯一ID的脚本标签中,这样你就可以在这里得到id.数据来自on('typeahead:selected'),但这是无关紧要的我只是认为我应该解释,因为它在代码中没有其他参考.
| 归档时间： |
|
| 查看次数： |
14907 次 |
| 最近记录： |