Шаблоны JavaScript - JavaScript templating

Шаблоны JavaScript относится к сторона клиента привязка данных метод, реализованный с помощью Язык JavaScript. Этот подход стал популярным благодаря более широкому использованию JavaScript, его расширению возможностей обработки клиентов и тенденции к передаче вычислений клиентскому веб-браузеру. Популярные библиотеки шаблонов JavaScript: AngularJS, Backbone.js, Ember.js, Handlebars.js, Vue.js и Moustache.js. Частой практикой является использование двойного фигурные скобки (т.е. {{key}}) для вызова значений данного ключа из файлов данных, часто JSON объекты.

Примеры

Во всех примерах используется внешний файл presnts.json со следующим содержанием

{  "президенты" : [      { "имя": "Вашингтон", "имя": "Джордж", "родившийся": "1732", "смерть": "1799" },      { "имя": "Линкольн", "имя": «Авраам», "родившийся": "1809", "смерть": "1865" }  ]}

Все примеры будут производить следующий HTML список:

  • Вашингтон (1732-1799)
  • Линкольн (1809-1865)
БиблиотекаHTML кодОбъяснение

Шаблон ДНК

<связь rel="таблица стилей" тип="текст / CSS" href="... / template.css"/><сценарий src="... / jquery.min.js"></сценарий><сценарий src="... / jquery.template.min.js"></сценарий> ➊Наши любимые президенты:<ул я бы="цель">    <Ли шаблон="[президенты]" z-var="имя., рожд., смерть".>     $ {имя} ($ {рождено} - $ {смерть}) </Ли></ул> ➋<сценарий>    $.getJSON('... / президенты.json', функция(данные) {        $('#цель').шаблон(данные);    });</сценарий> ➌

➊ Загрузите необходимые ресурсы, в том числе необходимые jQuery
➋ HTML-код с шаблон маркировка атрибутов для каждого подшаблона и z-var инструкции по замене.
➌ Загрузить данные JSON из presnts.json и применить данные к шаблону HTML с атрибутом id "цель".

Moustache.js

<сценарий src="... / jquery.min.js"></сценарий><сценарий src="... / mustache.min.js"></сценарий> ➊Наши любимые президенты:<ул я бы="цель"></ул> ➋<сценарий я бы="президент-шаблон" тип="текст / шаблон">    {{#президенты}}        <Ли>{{имя}} ({{родившийся}}-{{смерть}})</ li>    {{/ президенты}}</сценарий> ➌<сценарий>    $.getJSON('... / президенты.json', функция(данные) {        вар шаблон = $('# президент-шаблон').html();        вар Информация = Усы.to_html(шаблон, данные);        $('#цель').html(Информация);    });</сценарий> ➍

➊ Загрузите необходимые библиотеки здесь mustache.js и jQuery
➋ Код HTML предоставляет «цель» для вставки сгенерированного содержимого.
➌ Предоставьте шаблон с именем «президент-шаблон».
➍ Последняя - это функция, которая захватывает данные JSON и для каждого подэлемента президента захватывает один шаблон и заполняет его, чтобы окончательно выбрать целевую HTML-страницу, добавив к ней целое.

Создание шаблонов становится полезным, когда распространяемая информация может измениться, слишком велика, чтобы ее можно было поддерживать на различных HTML-страницах с помощью доступных человеческих ресурсов, и недостаточно велика, чтобы требовать более сложных шаблонов на стороне сервера.

Смотрите также

Рекомендации

  • Шаблоны JavaScript, Сеть разработчиков Mozilla, 2013 г.
  • Басаварадж, вина (2012), Раскрытие шаблонов на стороне клиента: усы, руль, dust.js и т. Д., Linkedin.com
  • Вильялобос, Рэй (2012), Введение в создание шаблонов JavaScript (видеоурок) с помощью Mustache.js, ViewSource.com, заархивировано с оригинал на 2013-05-13
  • Берджесс, Эндрю (2012), Лучшие практики при работе с шаблонами JavaScript, Net.tutsplus.com
  • Ландау, Брайан (2009), Тестирование библиотек шаблонов Javascript
  • http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/
  • Сравнение с другими фреймворками, Vue.js, получено 11 декабря 2018