5

如何手动使用预编译的 handlebars.js 模板？

比方说，我们有

source = "<p>Hello, my name is {{name}}</p>"
data = { name: "Joe" }

目前，我有

template = Handlebars.compile(source)
render: -> template(data)

源来自数据库，为了减少编译时间，我想使用一个编译步骤，预编译模板服务器端，Handlebars.precompile(source)然后使用类似的东西：

template = precompiled_template
render: -> precompiled_template(data)

precompiled_template 是一个带有函数定义的字符串，所以这不起作用。

另外，我发现了Hanlebars.compile(source)() == Handlebars.precompile(source)，但是在浏览了把手的源代码之后，它是编译器和运行时，我仍然不确定如何实现这一点。

4

2 回答 2

4

如果您直到现在还没有找到正确的问题，答案很简单。Handlebars 在命令行上带有一个 C 预编译器，如果您可以访问您的 shell，您可以简单地编译您的模板，每个模板分开或合并到一个文件中。

您可以通过 npm / 安装 Handlebars 或在您的系统上构建它。在 shell 上，您可以访问帮助文件

$> 车把 [ENTER]

您将看到一个帮助文件，例如 > - f --output 输出文件等 .. - m --min 最小化输出

$> Handlebars mysupertemplate.handlebars -f compiled.js -m （如果你想缩小js文件，“-m”）

在浏览器中运行 Handlebars.compile 会大大降低性能，因此在将文件发送到浏览器之前，值得尝试在服务器上进行预编译。

要在浏览器中注册 Handlebars 模板，您必须像这样加载它们：

var obj = {"foo":"bar"}

var template = require("./mytemplate-file.js") // require.js example
    template = template(Handlebars) // Pass Handlebars Only if the template goes mad asking for his Father

var html = Handlebars.templates[template-name](obj)

例如，如果您在“模板文件”中注册了多个模板，您将能够在 require 调用所有模板后使用

var html = Handlebars.templates["templateName"]({"foo":"bar"});

您可以通过在文件中注册所有已知的助手和/或为像这样的部分制作自定义助手来走得更远。

*// This will be the helper in you app.js file*

Handlebars.registerHelper("mypartials", function(partialName, data) {
     var partial = Handlebars.registerPartial(partialName) || data.fn
     Handlebars.partials[partialName] = partial
})

在你的模板文件中，你可以把这个...

{{#mypartial "divPartial"}}
  <div id="block"><h2>{{foo}}</h2><p>{{bar}}</p></div>  
{{/mypartial}}

{{#mypartial "formPartial"}}
  <form id="foo"><input type="text" value="{{foo}}" name="{{bar}}"></form>
{{/mypartial}}

现在您可以通过调用来访问这些文件

var html = Handlebars.partials["divPartial"]({"foo":"bar","bar":"foo"})
var formHtml = Handlebars.partials["formPartial"]({"bar":"bar","foo":"foo"})

希望这有点帮助..

于 2013-02-20T18:00:48.987 回答
0

这个速度测试http://jsperf.com/handlebars-compile-vs-precompile/3给出了答案。

显然，一种解决方案是针对eval()结果字符串，它会起作用。

代码是

var data = { name: "Greg" };
var source = "<p>Howdy, {{ name }}</p>";

eval("var templateFunction = " + Handlebars.precompile(source));
var template = Handlebars.template(templateFunction);

template(data);
=> "<p>Howdy, Greg</p>"

当然，需要小心 eval 并且可能存在更好的解决方案。

于 2013-01-03T22:29:48.170 回答