Jquery template: Работаем с jQuery Templates / Хабр

шаблонов JQuery | MST Solutions

Шаблоны JQuery — это быстрый и эффективный метод визуализации шаблонов на стороне клиента с использованием источника данных JSON. Это относится к методу привязки данных на стороне клиента с помощью JQuery.

Шаблоны JQuery – это быстрый и эффективный способ отображения шаблонов на стороне клиента с использованием источника данных JSON. Это относится к методу привязки данных на стороне клиента с помощью JQuery.

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

Доступно несколько типов шаблонов:

1. Mustache.js
2. Handlebars.js
3. Шаблон jQuery
4. Underscore.js
5. Встроенные шаблоны JS (EJS)

Это мощный инструмент с нулевыми зависимостями. Затем он совместим с серверной средой, такой как Node. js, загрузчиками модулей, такими как RequireJS, Browserify или webpack, и всеми веб-браузерами.

Теги шаблона:

Внутри шаблона мы можем использовать любой из следующих тегов

Теги	Использование
{{tmpl}}	Используется для композиции шаблона
{{wrap}}	Используется для составления и включения обернутого HTML. Это похоже на {{tmpl}}
{{each}}	Используется для перебора коллекции
{{if}}	Используется для условного отображения содержимого шаблона
{{еще} }	Используется с {{if}} для условного отображения содержимого шаблона
{{html}}	Используется для вставки строк разметки HTML в отображаемый шаблон. Оценивает указанное поле в текущем элементе данных или указанную функцию или выражение JavaScript
{{! }}	Используется для отображения комментариев. Содержимое тега {{!…}} игнорируется

Как работают шаблоны jQuery?

Шаблон jQuery применяется к объектам данных или массивам и преобразуется в HTML с использованием функций jQuery для манипулирования DOM.

Преимущества использования JQuery

1. Без синтаксического анализа мы можем легко преобразовать объект JSON в HTML
2. Повторное использование
3. Визуализация и кэширование на стороне клиента
4. Разделение использования пользовательского интерфейса и данных 90 012

В следующем примере мы расскажет, как работает шаблон JQuery.

Во-первых, мы должны добавить ссылку на библиотеку JQuery и шаблон JQuery.

Теперь мы хотим вызвать данные в формате HTML и отобразить их в веб-браузере. Итак, мы создали упорядоченный список внутри тега body 9.0003

Как правило, мы получаем данные со стороны сервера/веб-службы, но здесь мы создаем образец данных JSON вручную.

Затем мы создадим шаблон JQuery, определяющий, как будут отображаться данные. Мы можем использовать ${}, чтобы получить данные из строки JSON.

Здесь мы добавим данные JSON в тег body HTML.

Вывод

Ссылки:

1. http://codepb.github.io/jquery-template/

2. http://www.codeguru.com/csharp/csharp / работа с -jquery-templates.htm

Версия v5.6.0 шаблона состояния без jQuery

Версия v5.6.0 — первая версия веб-шаблона состояния без jQuery. В этой версии больше нет зависимостей jQuery и плагинов jQuery. В этой версии мы также представляем новую функцию расчета размера адаптивного шрифта. Размеры шрифта основного текста и заголовков, а также их верхнее и нижнее поля автоматически рассчитываются в соответствующие значения на основе размеров области просмотра браузера. Что еще более важно, новая версия использует новый jQuery-less 9.0025 Bootstrap 5 Framework . Изучите новые модули контента, посетив демонстрационный веб-сайт. Вы можете загрузить эту версию без jQuery и другие версии State Template, посетив страницу выпусков репозитория GitHub.

Обновления фреймворка и компонентов

• Больше никаких зависимостей jQuery и плагинов jQuery.
• Начальная загрузка обновлена ​​до версии 5.1.3.
• Удалены некоторые компоненты, зависящие от jQuery, такие как: карусели совы и слайд-шоу (заменены родной каруселью начальной загрузки), сервисные плитки, панели.
• Преобразованы следующие компоненты jQuery в ванильный JavaScript: Accordion, Accordion List, Fixed Header, Navigation, Number Counter, Parallax, Search, Site Settings, Tabs.
• Обновлены атрибуты переключения данных bootstrap для сворачивания/развертывания в кнопках сворачивания и модальных окнах по всему сайту. (например: изменено data-toggle="collapse" на data-bs-toggle="collapse" , изменено data-toggle="modal" на data-bs-toggle="modal" ) .
• Полностью изменена структура и код аккордеона. Теперь он работает на аккордеонном скрипте CAGgov Design System.
• Обновлена ​​структура боковой навигации для работы с новым компонентом аккордеона.
• Удалены карусели и слайдеры jQuery owl и заменены родным слайдером бутстрапа.

Макет и структура Обновления

• Добавлены функции заголовка поиска и макета навигации без значков на каждой странице примера. (Старый заголовок версии 5.5 и макет навигации все еще находятся в образцах навигации).
• Обновлены классы значков, чтобы отразить новую разметку начальной загрузки 5 (класс метки изменен на значок ).
• Заменены устаревшие классы сетки State Template на родные классы сетки Bootstrap (например, класс
  group изменен на row или квартал на col-md-3 . и т. д.).
• Обновлено свойство высоты основного баннера (удалено вычисление jQuery и заменено чистыми свойствами css).
• Позиция заголовка изменена на липкую вместо фиксированной.