handlebars.js - 使用 assemble 混合动态/预编译的 Handlebars 模板

Question

我正在使用 Grunt 和 Assemble 在我的网站上创建预编译模板，但我需要根据存储在客户端存储中的信息动态创建一些部分。有没有办法让模板的某些部分免于预编译？

Answer 1

我们不能自定义分隔符(Handlebars 的一个缺点)，但有几个解决方案可能对您有用。两者都不一定是惯用的，因此您可以判断它们是否适合您正在从事的项目。

字符串替换

您可以为不应编译的内容中的模板使用一些自定义(临时)分隔符，然后创建一个 block 帮助程序，在编译期间将这些分隔符转换回有效的 Handlebars 表达式(我对此答案进行了测试并且有效):

例如:

Handlebars.registerHelper("raw", function(options) {
  return options.fn(this).replace(/\[\[/g, '{{').replace(/\]\]/g, '}}');
});

然后像这样使用它:

{{#raw}}
  {{> foo }}
{{/raw}}

在 foo.hbs 里面，你可能有这样的东西:

<title>[[title]]</title>

它会渲染到:

<title>{{title}}</title>

这个解决方案肯定是 hacky，如果您碰巧在包含的内容中嵌入了任何代码示例并且其中一个示例恰好具有该语法(例如 [0,1,[foo, bar]]。

转义

此解决方案很可能是更好的方法。 Handlebars 不会评估任何以 \ 开头的模板。所以你可以这样做:

<title>\{{title}}</title>

它会渲染到:

<title>{{title}}</title>

第一个建议可能甚至不值得添加，但是嘿，你永远不知道对吗？