handlebars.js - 手动使用预编译的 Handlebars 模板

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 上，您可以访问帮助文件

$> Handlebars [ENTER]

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

$> Handlebars mysupertemplate.handlebars -f compiled.js -m ("-m" if you want to minify the js file)

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

希望这有点帮助..