如何从外部文件加载Hogan.JS模板？ [英] How to load templates with Hogan.JS from an external file?
问题描述
我使用 Hogan.JS 作为JavaScript模板库。它应该从外部文件加载JavaScript模板。人们可以在外部JavaScript文件中外包几个模板。
I use Hogan.JS as JavaScript templating library. It is supposed to load JavaScript templates from external files. One can probably outsource several templates in an external JavaScript file.
有谁知道怎么做？
我有以下代码示例：
<!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我可以解决模板但我总是需要一个单独的内联脚本。 ： - （
With the IDs I can address the templates but I always need a separate inline script. :-(
这如何与外部文件一起使用？
How does this work with external files?
推荐答案
您有两种方法可以加载外部模板：
You have two options to load external templates:
- 预编译模板（Hogan.js恕我直言的最佳功能）或
- 使用 require.js 的文本插件加载模板字符串
- Pre-compiling the templates (the best feature of Hogan.js IMHO) or
- Using require.js's text plugin to load the template string
不幸的是，预编译Hogan的文档。 js模板不存在。如果您有 Github repo 的副本，那么在 bin中目录是一个名为 hulk 的脚本，可以完成这项工作。它需要 nodejs 以及一些 npm 模块（即 nopt 和 mkdirp ）已安装。
Unfortunately, the documentation for pre-compiling Hogan.js templates is non-existent. If you have a copy of the Github repo then inside the bin directory is a script called hulk that will do the job. It requires nodejs along with some npm modules (i.e. nopt and mkdirp) installed.
一旦你有 nodejs 并安装了那些模块，给定一个templa te文件Test.hogan：
Once you have nodejs and those modules installed, given a template file Test.hogan:
<p>Your text here: {{text}}</p>
您可以使用以下命令预编译脚本：
You can pre-compile the script using the following command:
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 文件，因为这是编译器（现在您的模板已经预编译）并且只包含模板。 js 分发中的文件。
Now in your HTML page, you would load that templates.js file and it creates a global object called templates where the compiled template function is in key "Test". You can also leave out the hogan.js file since that is the compiler (and your templates are now pre-compiled) and just include the template.js file that comes in the distribution.
<!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>
注意：我使用当前的<$ c $确实遇到了一些问题c> master Github repo的分支，因为它生成的模板使用的构造函数与2.0.0模板版本中使用的构造函数不同。 如果您使用 hulk 请务必使用位于
Note: I did have some problems using the current master branch of the Github repo since it generated a template that uses a different constructor than the one used in the 2.0.0 template version. If you use hulk be sure to use the template.js file located in the lib folder.
或者，您可以使用require.js和文本插件。下载它们并将它们保存到 js 文件夹中。然后，您需要添加 require 语句来加载模板文本：
Alternatively, you can use require.js and the text plugin. Download them and save them to your js folder. Then you'll need to add a require statement to load the template text:
<!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>
这篇关于如何从外部文件加载Hogan.JS模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
