шаблонов JQuery | MST Solutions
Шаблоны JQuery — это быстрый и эффективный метод визуализации шаблонов на стороне клиента с использованием источника данных JSON. Это относится к методу привязки данных на стороне клиента с помощью JQuery.
Шаблоны JQuery – это быстрый и эффективный способ отображения шаблонов на стороне клиента с использованием источника данных JSON. Это относится к методу привязки данных на стороне клиента с помощью JQuery.
Создание шаблонов представляет собой комбинацию данных и макета. Преимущество этого заключается в том, что ваши данные и то, как они хранятся, отделены друг от друга. Теперь шаблоны обычно используются для форматирования часто используемого контента.
Доступно несколько типов шаблонов:
- Mustache.js
- Handlebars.js
- Шаблон jQuery
- Underscore.js
- Встроенные шаблоны JS (EJS)
Это мощный инструмент с нулевыми зависимостями. Затем он совместим с серверной средой, такой как Node. js, загрузчиками модулей, такими как RequireJS, Browserify или webpack, и всеми веб-браузерами.
Теги шаблона:
Внутри шаблона мы можем использовать любой из следующих тегов
Теги | Использование |
{{tmpl}} | Используется для композиции шаблона |
{{wrap}} | Используется для составления и включения обернутого HTML. Это похоже на {{tmpl}} |
{{each}} | Используется для перебора коллекции |
{{if}} | Используется для условного отображения содержимого шаблона |
{{еще} } | Используется с {{if}} для условного отображения содержимого шаблона |
{{html}} | Используется для вставки строк разметки HTML в отображаемый шаблон. Оценивает указанное поле в текущем элементе данных или указанную функцию или выражение JavaScript |
{{! }} | Используется для отображения комментариев.![]() |
Как работают шаблоны jQuery?
Шаблон jQuery применяется к объектам данных или массивам и преобразуется в HTML с использованием функций jQuery для манипулирования DOM.
Преимущества использования JQuery
- Без синтаксического анализа мы можем легко преобразовать объект JSON в HTML
- Повторное использование
- Визуализация и кэширование на стороне клиента
- Разделение использования пользовательского интерфейса и данных 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"
) . - Полностью изменена структура и код аккордеона.
- Обновлена структура боковой навигации для работы с новым компонентом аккордеона.
- Удалены карусели и слайдеры jQuery owl и заменены родным слайдером бутстрапа.
Макет и структура Обновления
- Добавлены функции заголовка поиска и макета навигации без значков на каждой странице примера. (Старый заголовок версии 5.5 и макет навигации все еще находятся в образцах навигации).
- Обновлены классы значков, чтобы отразить новую разметку начальной загрузки 5 (класс метки
- Заменены устаревшие классы сетки State Template на родные классы сетки Bootstrap (например, класс
изменен на grouprow
иликвартал
наcol-md-3
. и т. д.). - Обновлено свойство высоты основного баннера (удалено вычисление jQuery и заменено чистыми свойствами css).
- Позиция заголовка изменена на липкую вместо фиксированной.