Dot.js и Angular: есть ли способ стандартизировать HTML-шаблоны между фреймворками?

Веб-сайт DoT.js, показывает привязку или интерполяцию данных шаблона в виде

{{= it.modelFieldName }}

Угловые 2+ шоу

{{modelFieldName}}

Помимо замены строки перед использованием шаблона, как Dot.js может использовать {{modelFieldName}}, удаляя = it. а еще работаешь?

Причина: я хотел бы иметь единую директиву для создания шаблонов для наших дизайнеров, не являющихся программистами. Дизайнеры используют Adobe Illustrator для создания шаблонов, конвертируют с InkScape в SVG, затем программисты ссылаются на внешние шаблоны SVG в своей структуре шаблонов (некоторые используют Knockout.js с Dot, а некоторые используют Angular 2+.)

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

Если вы хотите использовать свои собственные разделители, вы можете изменить RegEx в `doT.templateSettings` по своему вкусу.

Вот список разделителей по умолчанию:

{{ }}    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 и размера шаблона, это может привести к лучшим результатам с добавлением false.

Если "selfcontained" - true, doT создаст функции, которые не зависят от doT. Как правило, сгенерированные функции не зависят от doT, за исключением encodeHTML, и он добавляется только при использовании кодирования. Если "selfcontained" имеет значение true и шаблон требует кодирования, функция encodeHTML будет включена в сгенерированную функцию шаблона.

Другие вопросы по тегам