如何预编译 Handlebars 模板

Question

使用 npm 编译把手模板的正确方法是什么。

网站上的documentation含糊不清。

Answer 1

首先，您需要通过运行ning 这条命令用节点安装车把。如果您没有节点，请先安装它。真的又快又无痛。

npm -g install handlebars

然后将所有车把模板与扩展车把一起放入 js/templates 中。例如，名为 booksList.handlebars 的文件就是 booksList 模板。在这些文件中，如果您将模板包含在 html 页面中，则不需要通常需要的脚本标签。所以不是这个：

<script id="booksList" type="text/x-handlebars-template">
  <ul>
    {{#each books}}
    <li>{{title}}</li>
    {{/each}}
  </ul>
</script>

它看起来像这样：

<ul>
  {{#each books}}
    <li>{{title}}</li>
  {{/each}}
</ul>

然后使用该文件夹中的所有模板，打开命令提示符，导航到 js 文件夹正上方的文件夹。您不想导航到 js 文件夹的原因是因为您要运行 handlebars 命令，如果您在 js 文件夹中，它会认为您的意思是运行 javascript 文件。然后运行 handlebars 命令将获取所有这些模板并将它们组合到一个名为 tamplates.js 的文件中。 -m 选项意味着它将缩小文件。

handlebars -m js/templates/> js/templates/templates.js

然后在您的 html 中，您只需包含一个文件和车把：

<script src="js/handlebars.js"></script>
<script src="js/templates/templates.js"></script>

当您需要在 javascript 中使用模板时，它的工作方式与以前相同，只是不必像这样编译模板：

var source   = $("#booksList").html();
var template = Handlebars.compile(source);

您现在可以像这样使用它：

var template = Handlebars.templates['booksList'];

而且您不必包含整个 javascript 库。您只需要运行time 版本。

<script src="/libs/handlebars.runtime.js"></script>

In addition to reducing the download size, eliminating client-side compilation will significantly speed up boot time, as compilation is the most expensive part of Handlebars.

Because you are precompiling templates, you can also specify a list of the known helpers to the compiler The Handlebars compiler will optimize accesses to those helpers for performance.

handlebars <input> -f <output> -k each -k if -k unless

感谢Adam Harris

如何预编译 Handlebars 模板

How do you Precompile Handlebars Templates

handlebars.js

cordova