Search code examples
dot.js

Dot.js and Angular: Any way to standardize html templates between frameworks?

DoT.js website, shows template data binding or interpolation as

{{= it.modelFieldName }}

Angular 2+ shows

{{modelFieldName}}

Aside from a string replacement before we use the template, how can Dot.js use {{modelFieldName}}, removing the = it. and still work?

Reason: I would like to have a single directive for template creation for our non-programmer designers. Designers use Adobe Illustrator to create templates, convert with InkScape to SVG, then programmers reference the external SVG templates in their template framework of choice (some use Knockout.js with Dot and some use Angular 2+.)

Solution

  • The name of this configuration is delimiters.

    Try customizing your dot as follows:

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

    Source: 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: 
    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
};

    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.