Разное

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

17.07.2023

шаблонов 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).
  • Позиция заголовка изменена на липкую вместо фиксированной.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *