Работая и учась в свой напряженный день с кодированием и разработками, сегодня я изучил систему шаблонов под названием Handlebars.js, и я собираюсь поделиться руководством для начинающих и введением в Handlebars.
Существует постоянная потребность в обновлении данных, отображаемых в браузере, большая часть Интернета состоит из динамических приложений, в которых данные часто меняются. Таким образом, шаблонизаторы и системы шаблонов очень полезны и помогают разработчикам создавать семантические шаблоны в вашем HTML, которые работают вместе с JavaScript для быстрого отображения большого количества HTML с помощью небольшого количества кода.
Handlebars.js – это популярный механизм создания шаблонов, мощный и простой в использовании. Он основан на языке шаблонов Mustache (как указано в их логотипе и дизайне). С помощью Handlebars вы можете отделить генерацию HTML от остальной части вашего JavaScript и писать более чистый код.
Основным строительным блоком Handlebars является выражение. Выражения отмечены в синтаксисе «усы» «{{ }}» и шаблонов без логики. можно сказать, что Handlebars — это надмножество Mustache.
В большинстве случаев можно заменить усы на руль и продолжить использовать текущие шаблоны. Полную информацию можно найти здесь.
Handlebars можно загрузить в браузер, как и любой другой файл JavaScript:
<script src="/path/to/handlebars.min.js"></script>or
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
Существует множество различных способов установки и использования Handlebars, ниже приведены некоторые из наиболее популярных.
НПМ
Пакет npm для Handlebar включает в себя как библиотеки, подходящие для систем, поддерживающих CommonJS, так и встроенные библиотеки браузера, которые можно использовать непосредственно с механизмами браузера.
npm install --save handlebars
Системы с поддержкой требований, такие как Node и Webpack, могут затем загружаться через:
require('handlebars');
или только во время выполнения:
require('handlebars/runtime');
Бауэр
Handlebars также поддерживает компонент bower, доступный для пользователей bower. Это может быть установлено в таком проекте.
bower install --save handlebars
CDN
Handlebars также размещен на нескольких бесплатных CDN.
- cdnjs
- jsДеливр. Доступно расширенное использование, такое как псевдоним версий и составление.
Начните свою первую демонстрацию с Handlebars следующим образом:
Чтобы начать работу с Handlebars, необходимо выполнить всего несколько шагов. Во-первых, вы должны создать свой шаблон в файле HTML. Он создается в стандартном теге ‹script› и представляет собой комбинацию выражений HTML и Handlebar. Шаблон может иметь любой идентификатор, который вы хотите, но тип должен быть «text/x-handlebars-template», иначе тег скрипта будет отображаться как JavaScript.
В этом примере я создал шаблон «handlebars-demo», добавил немного HTML и четыре выражения Handlebar.
Теперь поместите необходимые блоки кода JavaScript для рендеринга и добавьте обработчик шаблонов для Handlebars.
После получения шаблона мы можем скомпилировать его с помощью метода Handlebars.compile(), который возвращает функцию. Затем эта функция выполняется путем передачи контекста в качестве аргумента. Когда выполнение завершено, функция возвращает желаемый HTML со всеми переменными, замененными их соответствующими значениями. На этом этапе мы можем внедрить HTML-код в нашу веб-страницу.
Вывод после рендеринга шаблонов в HTML с помощью Handlebars:
Надеюсь, вы прочитали и узнали что-то новое сегодня из этой статьи.
