Dot.js 和 Angular:有什么方法可以在框架之间标准化 html 模板?
Dot.js and Angular: Any way to standardize html templates between frameworks?
DoT.js website,将模板数据绑定或插值显示为
{{= it.modelFieldName }}
Angular 2+ 显示
{{modelFieldName}}
除了在我们使用模板之前进行字符串替换,Dot.js 如何使用 {{modelFieldName}}
,删除 = it.
仍然有效?
原因:我想为我们的非程序员设计人员创建一个模板创建指令。设计师使用 Adobe Illustrator 创建模板,使用 InkScape 转换为 SVG,然后程序员在他们选择的模板框架中引用外部 SVG 模板(一些使用 Knockout.js with Dot,一些使用 Angular 2+。)
此配置的名称是delimiters
。
尝试按如下方式自定义您的 dot
:
doT.templateSettings.interpolate = /\{\{([\s\S]+?)\}\}/g;
来源:http://olado.github.io/doT/index.html
API
doT.templateSettings - default compilation settings
You can customize doT by changing compilation settings. Here are the default settings:
<pre>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
};
</pre>
If you want to use your own delimiters, you can modify RegEx in `doT.templateSettings` to your liking.
Here is the list of default delimiters:
{{ }} for evaluation
{{= }} for interpolation
{{! }} for interpolation with encoding
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines
{{? }} for conditionals
{{~ }} for array iteration
By default, the data in the template must be referenced with 'it'. To change the default variable name, modify setting 'varname'. For example, if you set 'varname' to "foo, bar" you will be able to pass 2 data instances and refer to them from the template by foo and bar.
To control whitespace use 'strip' option, true - to strip, false - to preserve.
'append' is a performance optimization setting. It allows to tweak performance, depending on the javascript engine used and size of the template, it may produce better results with append set to false.
If 'selfcontained' is true, doT will produce functions that have no dependencies on doT. In general, generated functions have no dependencies on doT, with the exception for encodeHTML and it is only added if encoding is used. If 'selfcontained' is true and template needs encoding, encodeHTML function will be included in the generated template function.
DoT.js website,将模板数据绑定或插值显示为
{{= it.modelFieldName }}
Angular 2+ 显示
{{modelFieldName}}
除了在我们使用模板之前进行字符串替换,Dot.js 如何使用 {{modelFieldName}}
,删除 = it.
仍然有效?
原因:我想为我们的非程序员设计人员创建一个模板创建指令。设计师使用 Adobe Illustrator 创建模板,使用 InkScape 转换为 SVG,然后程序员在他们选择的模板框架中引用外部 SVG 模板(一些使用 Knockout.js with Dot,一些使用 Angular 2+。)
此配置的名称是delimiters
。
尝试按如下方式自定义您的 dot
:
doT.templateSettings.interpolate = /\{\{([\s\S]+?)\}\}/g;
来源:http://olado.github.io/doT/index.html
API
doT.templateSettings - default compilation settings
You can customize doT by changing compilation settings. Here are the default settings:
<pre>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 }; </pre>
If you want to use your own delimiters, you can modify RegEx in `doT.templateSettings` to your liking.Here is the list of default delimiters:
{{ }} for evaluation {{= }} for interpolation {{! }} for interpolation with encoding {{# }} for compile-time evaluation/includes and partials {{## #}} for compile-time defines {{? }} for conditionals {{~ }} for array iteration
By default, the data in the template must be referenced with 'it'. To change the default variable name, modify setting 'varname'. For example, if you set 'varname' to "foo, bar" you will be able to pass 2 data instances and refer to them from the template by foo and bar.
To control whitespace use 'strip' option, true - to strip, false - to preserve.
'append' is a performance optimization setting. It allows to tweak performance, depending on the javascript engine used and size of the template, it may produce better results with append set to false.
If 'selfcontained' is true, doT will produce functions that have no dependencies on doT. In general, generated functions have no dependencies on doT, with the exception for encodeHTML and it is only added if encoding is used. If 'selfcontained' is true and template needs encoding, encodeHTML function will be included in the generated template function.