手动使用预编译的车把模板

Question

如何手动使用预编译好的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)，但是浏览了handlebars的源代码，是编译器和运行时，我仍然不知道如何实现。

Answer 1

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

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

$> 车把 [ENTER]

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

$> Handlebars mysupertemplate.handlebars -f compiled.js -m ("-m" if 你想缩小js文件）

在浏览器中运行 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"})

希望这有点帮助..

Answer 2

这次速度测试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 并且可能存在更好的解决方案。