Dot.js 和 Angular：有什么方法可以在框架之间标准化 html 模板？

Question

DoT.js website，将模板数据绑定或插值显示为

{{= it.modelFieldName }}

Angular 2+ 显示

{{modelFieldName}}

除了在我们使用模板之前进行字符串替换之外，Dot.js 如何使用{{modelFieldName}}，删除= it. 并且仍然有效？

原因：我想为我们的非程序员设计人员创建一个模板创建指令。设计师使用 Adob​​e Illustrator 创建模板，使用 InkScape 转换为 SVG，然后程序员在他们选择的模板框架中引用外部 SVG 模板（有些使用带有 Dot 的 Knockout.js，有些使用 Angular 2+。）

Answer 1

这个配置的名字是delimiters。

尝试自定义您的dot，如下所示：

doT.templateSettings.interpolate = /\{\{([\s\S]+?)\}\}/g;

来源：http://olado.github.io/doT/index.html

API

doT.templateSettings - 默认编译设置

您可以通过更改编译设置来自定义 doT。以下是默认设置：

doT.templateSettings = {
  evaluate:    /\{\{([\s\S]+?)\}\}/g,
  interpolate: /\{\{=([\s\S]+?)\}\}/g,
  encode:      /\{\{!([\s\S]+?)\}\}/g,
  use:         /\{\{#([\s\S]+?)\}\}/g,
  define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  varname: 'it',
  strip: true,
  append: true,
  selfcontained: false
};

如果您想使用自己的分隔符，可以根据自己的喜好修改 `doT.templateSettings` 中的 RegEx。

以下是默认分隔符列表：

{{ }}    for evaluation
{{= }}  for interpolation
{{! }}  for interpolation with encoding
{{# }}  for compile-time evaluation/includes and partials
{{## #}}    for compile-time defines
{{? }}  for conditionals
{{~ }}  for array iteration

默认情况下，模板中的数据必须用'it'引用。要更改默认变量名称，请修改设置“varname”。例如，如果您将 'varname' 设置为“foo, bar”，您将能够传递 2 个数据实例并通过 foo 和 bar 从模板中引用它们。

要控制空白，请使用“strip”选项，true - 剥离，false - 保留。

'append' 是一个性能优化设置。它允许调整性能，具体取决于使用的 javascript 引擎和模板的大小，如果将 append 设置为 false，它可能会产生更好的结果。

如果 'selfcontained' 为真，doT 将生成不依赖于 doT 的函数。通常，生成的函数对 doT 没有依赖关系，除了 encodeHTML 并且仅在使用编码时才添加。如果 'selfcontained' 为真且模板需要编码，则 encodeHTML 函数将包含在生成的模板函数中。