javascript 如何从外部文件加载带有 Hogan.JS 的模板？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14601578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load templates with Hogan.JS from an external file?
提问by Benny Neugebauer
I use Hogan.JSas JavaScript templating library. It is supposed to load JavaScript templates from external files. One can probably outsource several templates in an external JavaScript file.
我使用Hogan.JS作为 JavaScript 模板库。它应该从外部文件加载 JavaScript 模板。可以将多个模板外包给外部 JavaScript 文件。
Does anyone know how to do that?
有谁知道这是怎么做到的吗？
I have the following code sample:
我有以下代码示例：
<!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>
With the IDs I can address the templates but I always need a separate inline script. :-(
有了 ID，我可以处理模板，但我总是需要一个单独的内联脚本。:-(
How does this work with external files?
这如何处理外部文件？
回答by Phuong LeCong
You have two options to load external templates:
您有两个选项可以加载外部模板：
- Pre-compiling the templates (the best feature of Hogan.js IMHO) or
- Using require.js's text pluginto load the template string
- 预编译模板（Hogan.js 恕我直言的最佳功能）或
- 使用require.js的文本插件加载模板字符串
Unfortunately, the documentation for pre-compiling Hogan.js templates is non-existent. If you have a copy of the Github repothen inside the bindirectory is a script called hulkthat will do the job. It requires nodejsalong with some npmmodules (i.e. noptand mkdirp) installed.
不幸的是，预编译 Hogan.js 模板的文档并不存在。如果您有Github 存储库的副本，则该bin目录内有一个名为的脚本hulk，它将完成这项工作。它需要nodejs以及安装的一些npm模块（即nopt和mkdirp）。
Once you have nodejsand those modules installed, given a template file Test.hogan:
一旦你nodejs安装了这些模块，给定一个模板文件 Test.hogan：
<p>Your text here: {{text}}</p>
You can pre-compile the script using the following command:
您可以使用以下命令预编译脚本：
hulk Test.hogan
Resulting in the following text:
产生以下文本：
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: { }});
Save this to a file called templates.js
将此保存到一个名为 templates.js
Now in your HTML page, you would load that templates.jsfile and it creates a global object called templateswhere the compiled template function is in key "Test". You can also leave out the hogan.jsfile since that is the compiler (and your templates are now pre-compiled) and just include the template.jsfile that comes in the distribution.
现在在您的 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>
Note:I did have some problems using the current masterbranch 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 hulkbe sure to use the template.jsfile located in the libfolder.
注意：我在使用masterGithub 存储库的当前分支时确实遇到了一些问题，因为它生成的模板使用的构造函数与 2.0.0 模板版本中使用的构造函数不同。如果您使用，请hulk务必使用template.js位于lib文件夹中的文件。
Alternatively, you can use require.js and the text plugin. Download them and save them to your jsfolder. Then you'll need to add a requirestatement to load the template text:
或者，您可以使用 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>
回答by Alex
There is another way that works very well if you are not using node nor if you want to rely require.js
如果您既不使用 node 也不想依赖 require.js，则还有另一种非常有效的方法
You can simply use the jQuery $.get to get the path to the template file. So an example looks like this:
您可以简单地使用 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);
});
The template can simply be a .html file (I just use .hogan) and all of the html in the template should be wrapped in a script tag with a unique id so you can get the id here. Datum comes from on('typeahead:selected') but that's irrelevant I just thought I should explain since it is in the code with no other reference.
模板可以只是一个 .html 文件（我只使用 .hogan），并且模板中的所有 html 都应该包含在一个具有唯一 id 的脚本标记中，以便您可以在此处获取 id。数据来自 on('typeahead:selected') 但这无关紧要，我只是想我应该解释一下，因为它在代码中没有其他参考。
回答by Louis Ameline
I had the same question and ended up with a different way of doing things than Phuong's, I thought I'd share it.
我有同样的问题，最终以与 Phuong 不同的做事方式结束，我想我会分享它。
Server side, I compile the template and save it to a file with the following script :
服务器端，我编译模板并将其保存到一个文件中，脚本如下：
// 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 !') }
});
And client side, I do :
和客户端，我做：
<!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>
I hope it helps !
我希望它有帮助！
