我使用 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,我可以对模板进行寻址,但我总是需要一个单独的内联脚本。
这如何处理外部文件?
有两个选项可以加载外部模板:
- 预编译模板(霍根的最佳功能.js恕我直言)或
- 使用 require.js 的文本插件加载模板字符串
不幸的是,预编译 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>
注意:使用 Github 存储库的当前 master
分支时,我确实遇到了一些问题,因为它生成的模板使用与 2.0.0 模板版本中使用的构造函数不同的构造函数。如果使用hulk
请确保使用位于lib
文件夹中的template.js
文件。
或者,您可以使用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>
如果您不使用 node 或想要依赖 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'),但这无关紧要,我只是认为我应该解释一下,因为它在代码中没有其他参考。
我有同样的问题,最终得到了与Phuong不同的做事方式,我想我会分享它。
服务器端,我编译模板并将其保存到具有以下脚本的文件中:
// template will be a string
var template = hogan.compile(
'<span>{{text}}</span>',
{ asString: true }
);
// prepare the content of the file we are about to create
var content =
'if(!templates) var templates = {};' +
'templates.example = ' + template + ';';
// write to a file that will be called by the client
fs.writeFile('compiledTemplate.js', content, function(err){
if(err){ console.log('Oops !') }
});
和客户端,我做:
<!DOCTYPE html>
<html>
<head>
<script src="js/hogan-2.0.0.js"></script>
<script src="js/compiledTemplate.js"></script>
</head>
<body>
<script>
var data = {
text: 'Hello World'
};
var template = new Hogan.Template(templates.example),
html = template.render(data);
var box = document.createElement('div');
box.innerHTML = html;
document.body.insertBefore(box,document.body.childNodes[0]);
</script>
</body>
</html>
我希望它有帮助!