Я пытаюсь узнать о новых применениях JavaScript как серверного языка и как функционального языка. Несколько дней назад я слышал о node.js и Express Framework. Затем я увидел файл underscore.js как набор служебных функций. Я видел этот вопрос на stackoverflow . В нем говорится, что мы можем использовать underscore.js в качестве движка шаблонов. Кто-нибудь знает хорошие учебники о том, как использовать underscore.js для шаблонов, особенно для начинающих, у которых меньше опыта работы с продвинутым javascript. Спасибо
262
Ответы:
Все, что вам нужно знать о шаблоне подчеркивания, здесь . Имейте в виду только 3 вещи:
<% %>
- выполнить некоторый код<%= %>
- напечатать некоторое значение в шаблоне<%- %>
- напечатать некоторые значения HTML, экранированныеЭто все об этом.
Простой пример:
тогда
tpl({foo: "blahblah"})
будет представлен в строку<h1>Some text: blahblah</h1>
источник
источник
text/html
говоритtype="text/html"
, что ложь, ложь может вызвать проблемы. Вы бы лучше с точным типом, таким какtext/x-underscore
.type="foo/bar"
потому что хочу, чтобы все знали, что это не имеет значения, пока браузер / сервер не распознает его и не попытается сделать что-то с этим. Поскольку html не является типом сценария, я чувствую себя довольно безопасно с text / html (Джон Резиг использует его), foo / bar также работает :)*/x-*
типы для «готовых» применений, я не думаю, чтоtext/underscore
в официальных реестрах есть тип, поэтому я использую его,text/x-underscore
потому что я параноик, и они действительно хотят меня достать.В простейшей форме вы бы использовали его так:
Если вы собираетесь использовать шаблон несколько раз, вам нужно скомпилировать его, чтобы он работал быстрее:
Я лично предпочитаю синтаксис усов. Вы можете настроить маркеры маркеров шаблона для использования двойных фигурных скобок:
источник
interpolate
совет не сработал, но это_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };
Документация для шаблонов является частичной, я наблюдал за источником.
Функция _.template имеет 3 аргумента:
Если данные (или ноль) не заданы, будет возвращена функция рендеринга . У него есть 1 аргумент:
В настройках есть 3 шаблона регулярных выражений и 1 статический параметр:
Код в разделе оценки будет просто оценен. Вы можете добавить строку из этого раздела с помощью команды __p + = "mystring" в оцененный шаблон, но это не рекомендуется (не является частью интерфейса шаблонов), используйте вместо этого раздел интерполяции. Этот тип раздела предназначен для добавления блоков, таких как if или for, в шаблон.
Результат кода в разделе интерполяции будет добавлен в оцененный шаблон. Если ноль возвращен, будет добавлена пустая строка.
Раздел escape экранирует html с помощью _.escape для возвращаемого значения данного кода. Таким образом, он похож на _.escape (код) в интерполированном разделе, но экранируется с \ пробельными символами, такими как \ n, прежде чем передать код в _.escape . Я не знаю, почему это так важно, это в коде, но он хорошо работает с интерполяцией и _.escape - который не экранирует символы пробела - тоже.
По умолчанию параметр data передается с помощью оператора with (data) {...} , но этот вид оценки намного медленнее, чем оценка с именованной переменной. Так называя данные с переменным параметром что - то хорошее ...
Например:
полученные результаты
Вы можете найти здесь больше примеров того, как использовать шаблон и переопределить настройки по умолчанию: http://underscorejs.org/#template
При загрузке шаблона у вас есть много вариантов, но в конце вы всегда должны преобразовать шаблон в строку. Вы можете дать его в качестве обычной строки , как в примере выше, или вы можете загрузить его из тега сценария, и использовать .html () функция JQuery, или вы можете загрузить его из отдельного файла с TPL плагин из require.js ,
Еще один вариант построения дерева dom с лаконичным вместо шаблонизации.
источник
Я привожу очень простой пример
1)
Результат будет
2) Это шаблон
Это HTML
Это код javascript, который содержит объект json и помещает шаблон в html
источник
с экспресс это так просто. все, что вам нужно, это использовать модуль консолидации на узле, поэтому вам нужно установить его:
тогда вы должны изменить движок по умолчанию на HTML-шаблон следующим образом:
зарегистрируйте механизм шаблонов подчеркивания для расширения html:
это сделано !
Теперь для загрузки, например, шаблон с именем «index.html»:
Я надеюсь, что это помогло вам!
источник
Я хотел бы поделиться еще одним важным открытием.
использование <% = variable => может привести к уязвимости межсайтового скриптинга. Поэтому безопаснее использовать <% - variable ->.
Нам пришлось заменить <% = на <% - чтобы предотвратить атаки межсайтовых скриптов. Не уверен, повлияет ли это на производительность
источник
Лодаш тоже тот же. Сначала напишите сценарий следующим образом:
Теперь напишите несколько простых JS следующим образом:
Где popoup - это div, где вы хотите создать таблицу
источник