Script type javascript template

Между разделителями записывается и выполняется javascript код.

Содержимое переменной будет выводиться как HTML.

– вывод строки в виде текста.

Теги будут будут преобразованы в текст. Например

-> <hr>

script type=»text/template»

Теги script с типом type=»text/template» служат контейнерами для шаблонов.

Данные записанные в данном теге не будут отображаться на странице, таким образом мы прячем шаблон.

script type="text/template" id="items-template"> div class="items"> % _.forEach(items, function(item) div class="item-title"> %- item.title %> div> div class="item-description"> %= item.description %> div> % >); %> div> script>

Создание рендер функции и передача данных

Чтобы отрисовать шаблон на основе данных, нам нужно создать рендер функцию.

Рендер функция создается из написанного нами шаблона.

Это нужно для того чтобы заменить на данные из javascript объектов.

Чтобы создать рендер функцию нужно передать в метод _.template содержимое нашего шаблона.

Для удобства мы записываем шаблоны в тег script type="text/template" .

Получившийся результат можем вывести на страницу в виде html кода.

div class="js-dinamic">div> script type="text/template" id="hello"> hello ! script> script type="text/javascript"> var compiled = _.template($('#hello').html()); $('.js-dinamic').html(compiled(< 'user': 'fred' >)); script>
Примеры использования javascript кода внутри шаблона
script type="text/template" id="main-template"> Цикл из массива items. div class="item"> () div> ); %> div> Используя внутри шаблона javascript методы, обязательно ставьте точку с запятой (;). br> Но если вызываем функцию которая возвращает значение то точка с запятой не ставится и в разделитель добавляется знак равно (=). => TEXT div> div> Операторы сравнения. Истина else < %>Ложь %> Только истина %> div> Использование кода в атрибутах. div class="item" data-inex=""> div> ); %> script> script type="text/javascript"> // Функция делает все буквы заглавными function textUpperCase(text) return text.toUpperCase(); > script>
Источник
Элемент "template"
Встроенный элемент предназначен для хранения шаблона HTML. Браузер полностью игнорирует его содержимое, проверяя лишь синтаксис, но мы можем использовать этот элемент в JavaScript, чтобы создать другие элементы.
В теории, для хранения разметки мы могли бы создать невидимый элемент в любом месте HTML. Что такого особенного в ?
Во-первых, его содержимым может быть любой корректный HTML-код, даже такой, который обычно нуждается в специальном родителе.
Также внутри можно поместить стили и скрипты:
Браузер рассматривает содержимое как находящееся «вне документа»: стили, определённые в нём, не применяются, скрипты не выполнятся, не запустится и т.д.
Содержимое оживёт (скрипт выполнится), когда мы поместим его в нужное нам место.
Использование template
Содержимое шаблона доступно по его свойству content в качестве DocumentFragment – особый тип DOM-узла.
Можно обращаться с ним так же, как и с любыми другими DOM-узлами, за исключением одной особенности: когда мы его куда-то вставляем, то в это место вставляется не он сам, а его дети.

Давайте перепишем пример Shadow DOM из прошлой главы учебника с помощью :
p
Когда мы клонируем и вставляем tmpl.content в строке (*) , то, так как это DocumentFragment , вместо него вставляются его потомки ( ,
).
Именно они и формируют теневой DOM:
Итого
Содержимым может быть любой синтаксически корректный HTML.
Содержимое считается находящимся «вне документа», поэтому оно ни на что не влияет.
Мы можем получить доступ к template.content из JavaScript, клонировать его и переиспользовать в новом компоненте.

Элемент уникальный по следующим причинам:
Элемент не поддерживает итерацию, связывания данных или подстановки переменных. Однако эти возможности можно реализовать поверх него.
Источник
Эволюция шаблонных систем для JavaScript
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Различных шаблонных систем – много.
Они постепенно эволюционировали и развивались.
В этой главе мы разберём, как шёл этот процесс, какие шаблонки «родились», какие бонусы нам даёт использование той или иной шаблонной системы.
Микрошаблоны
Микрошаблоны (англ. microtemplate) мы уже видели на примере _.template .
Это HTML со вставками переменных и произвольным JS.
Шаблонная система компилирует этот код в JavaScript-функцию с минимальными модификациями, и она уже, запустившись с данными, генерирует результат.
Достоинства и недостатки такого подхода:
Жёстко привязан к языку JavaScript.
При ошибке в шаблоне приходится лезть внутрь «страшной» функции

Простая и быстрая шаблонная система
Внутри JS-функции доступен полноценный браузерный отладчик, функция хоть и страшна, но понятна.

Код в шаблоне
Включение произвольного JS-кода в шаблон, в теории, позволяет делать в нём всё, что угодно. Но обратная сторона медали – шаблон вместо внятного HTML может стать адским нагромождением разделителей вперемешку с вычислениями. Что рекомендуется делать в шаблонах, а что нет?
Можно разделить код на два типа с точки зрения шаблонизации:
Бизнес-логика – код, формирующий данные, основной код приложения.
Презентационная логика – код, описывающий, как показываются данные.

Например, код, получающий данные с сервера для вывода в таблице – бизнес-логика, а код, форматирующий даты для вывода – презентационная логика.
В шаблонах допустима лишь презентационная логика.
Кросс-платформенность
Зачастую, нужно использовать один и тот же шаблон и в браузере и на сервере.
Например, серверный код генерирует HTML со списком сообщений, а JavaScript на клиенте добавляет к нему новые по мере появления.
…Но как использовать на сервере шаблон с JavaScript, если его основной язык – PHP, Ruby, Java?
Эту проблему можно обойти. На сервер, использующем PHP, Ruby, Java или какой-то другой язык, дополнительно ставится виртуальная машина V8 и настраивается интеграция с ней. Почти все платформы это умеют.
После этого становится возможным запускать JavaScript-шаблоны и передавать им данные в виде объектов, массивов и так далее.
Этот подход может показаться искусственным, но на самом деле он вполне жизнеспособен и используется в ряде крупных проектов.
Прекомпиляция
Эта шаблонка и большинство других систем, которые мы рассмотрим далее, допускают прекомпиляцию.
То есть, можно заранее, до выкладывания сайта на «боевой сервер», обработать шаблоны, создать из них JS-функции, объединить их в единый файл и далее, в «боевом окружении» использовать уже их.
Современные системы сборки (brunch, grunt с плагинами и другие) позволяют делать это удобно, а также хранить шаблоны в разных файлах, каждый – в нужной директории с JS-кодом для виджета.
Хелперы и фильтры
JavaScript-вставки не всегда просты и элегантны. Иногда, чтобы что-то сделать, нужно написать порядочно кода.
Для того, чтобы сделать шаблоны компактнее и проще, в них стали добавлять фильтры и хелперы.

Хелпер (англ. helper) – вспомогательная функция, которая доступна в шаблонах и используется для решения часто возникающих задач. В _.template , чтобы объявить хелпер, можно просто сделать глобальную функцию. Но это слишком грубо, так не делают. Гораздо лучше – использовать объект _.templateSettings.imports , в котором можно указать, какие функции добавлять в шаблоны, или опцию imports для _.template . Пример хелпера – функция t(phrase) , которая переводит phrase на текущий язык:

_.templateSettings.imports.t = function(phrase) < // обычно функция перевода немного сложнее, но здесь это не важно if (phrase == "Hello") return "Привет"; >// в шаблоне используется хелпер t для перевода var compiled = _.template(" "); alert( compiled() ); // Привет
Свой язык
Для того, чтобы сделать шаблон ещё короче, а также с целью «отвязать» их от JavaScript, ряд шаблонных систем предлагают свой язык.
Шаблон для меню в Handlerbars, к примеру, будет выглядеть так:
Как видно, вместо JavaScript-конструкций здесь используются хелперы. В примере выше > . – «блочный» хелпер: он показывает своё содержимое для каждого элемента items и является альтернативой forEach .
Есть и другие встроенные в шаблонизатор хелперы, можно легко делать свои.
Использование такого шаблона:
// текст шаблона должен быть в переменной tmpl var compiled = Handlebars.compile(tmpl); var result = compiled(< title: "Сладости", items: ["Торт", "Пирожное", "Пончик"] >);
Библиотека шаблонизации Handlebars «понимает» этот язык. Вызов Handlebars.compile принимает строку шаблона, разбивает по разделителям и, аналогично предыдущему виду шаблонов, делает JavaScript-функцию, которая затем по данным выдаёт строку-результат.
Запрет на встроенный JS
Если «свой язык шаблонизатора» очень прост, то библиотеку для его поддержки можно легко написать под PHP, Ruby, Java и других языках, которые тем самым научатся понимать такие шаблоны.
Если шаблонка действительна нацелена на кросс-платформенность, то явные JS-вызовы в ней запрещены. Всё делается через хелперы.
Если же нужна какая-то логика, то она либо выносится во внешний код, либо делается через новый хелпер – он отдельно пишется на JavaScript (для клиента) и для сервера (на его языке). Получается полная совместимость.
Это создаёт определённые сложности. Например, в Handlebars есть хелпер > . > , который выводит содержимое, если истинно условие cond . При этом вместо cond нельзя поставить, к примеру, a > b или вызов str.toUpperCase() , будет ошибка. Все вычисления должны быть сделаны на этапе передачи данных в шаблон.
Так сделано как раз для переносимости шаблонной системы на другие языки, но на практике не очень-то удобно.
Продвинутые кросс-платформенные шаблонизаторы, в частности, Closure Templates, обладают более мощным языком и умеют самостоятельно разбирать и компилировать многие выражения.
Шаблонизация компонент
До этого мы говорили о шаблонных системах «общего назначения». По большому счёту, это всего лишь механизмы для преобразования одной строки в другую. Но при описании шаблона для компоненты мы хотим сгенерировать не просто строку, а DOM-элемент, и не просто генерировать, а в дальнейшем – с ним работать.
Современные шаблонные системы «заточены» на это. Они умеют создавать по шаблону DOM-элементы и автоматически выполнять после этого разные полезные действия.
Можно сохранить важные подэлементы в свойства компоненты, чтобы было проще к ним обращаться из JavaScript.
Можно автоматически назначать обработчики из методов компонента.
Можно запомнить, какие данные относятся к каким элементам и в дальнейшем, при изменении данных автоматически обновлять DOM («привязка данных» – англ. data binding).

Одной из первых систем шаблонизации, которая поддерживает подобные возможности была Knockout.JS.
Попробуйте поменять значение в примере ниже и вы увидите двухстороннюю привязку данных в действии:
Источник

Читайте также: Python combobox выбранный элемент