Question

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

网站上的documentation含糊不清。

Answer 1

首先，您需要通过运行此命令来安装带有节点的把手。如果您没有节点，请先安装它。这真的很快，很轻松。

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文件。然后运行把手命令，该命令将获取所有这些模板并将它们组合成一个名为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库。您只需要运行时版本。

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

除了减少下载大小外，还消除了客户端   编译将显着加快启动时间，因为编译是   Handlebars中最昂贵的部分。

由于您是预编译模板，因此您还可以指定列表   编译器的已知助手   Handlebars编译器将优化对这些帮助程序的访问   性能

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

感谢Adam Harris

你如何预编译把手模板

1 个答案: