Handlebar.js - это расширение популярной библиотеки JavaScript под названием Mustache.js, начавшей набег примерно в 2009 г., на создание которой во многом вдохновил ctemplate и et .
Думайте об этом как о языке в языке
Исходя из изучения React и некоторого Ruby on Rails, он очень похож на модель MVC, выраженную в приложении rails, за исключением того, что это все VIEW шаблона MVC!
Веб-шаблон (система)?
Чтобы дать больше контекста, давайте объясним, что такое веб-шаблон и что такое система веб-шаблонов.
Веб-шаблон похож на его реальный аналог, за исключением того, что он является цифровой версией. Это позволяет бизнесу, компании быстро внедрять веб-сайты. Лично мне нравится думать о таких сайтах, как Wordpress и Squarespace. Поскольку они действительно используют форму веб-шаблонов.
Система веб-шаблонов - это всеобъемлющий процесс, который включает в себя использование шаблонов, мы можем быстро повторно использовать и изменять веб-сайты! Это что-то вроде системы plug-n-play или, что еще лучше, похоже на сборку каких-то лего.
Опять же, исходя из моего опыта знакомства с React, это аналогичная концепция без компонента Virtual DOM и состояния.
Https://www.youtube.com/watch?v=3HMtarQAt3A&t=1119s Отличное освежающее видео для понимания того, что такое React, с несколькими примерами его работы!
Handlebars.js
Так что же такое Handlebar.js? Как было определено ранее, это просто расширение Mustache.js, которое добавляет некоторые дополнительные функции и возможности.
«Handlebars предоставляет возможности, необходимые для эффективного создания семантических шаблонов без каких-либо разочарований.
Handlebars в значительной степени совместим с шаблонами Mustache. В большинстве случаев можно заменить Усы на Ручки и продолжить использование ваших текущих шаблонов. Полную информацию можно найти здесь ». - Handlebars.js
Он называется Mustache.js и Handlebars.js, так как {{скобка и настоящие усы!
Чтобы по-настоящему понять, как работает Mustache.js, я создал супер-простую веб-страницу, которая просто загружает статические данные, которые я создал.
Перво-наперво, мы загружаем Handlebars.js на нашу машину, заходим на веб-сайт Handlebars.js и нажимаем кнопку УСТАНОВКА .
Я использую NPM для управления загрузкой библиотек, поэтому я просто запустил npm install handlebars
После завершения этого процесса не забудьте связать Handlebars, в этом примере я связал через размещенный CDN
В этом примере я использовал JQuery, так как это то, что я хочу улучшить, но ванильного JS было бы достаточно - но теперь мы можем продолжить и создать наш шаблон! В нашем файле Index.html мы должны определить скрипт, для которого мы будем вызывать функцию, а также div или контейнер, который действует как заполнение для нашего шаблона.
Как вы можете видеть на приведенном выше снимке экрана, мы определяем наш скрипт, который затем определяем, что будет показывать. Я уже знаю ключи, к которым я обращаюсь; имя, род занятий и местоположение, однако, чтобы ссылаться на них в Handlebars.js, мы заключаем их в фигурные скобки {{}} и используем ключ для ссылки на значение. Наконец, у нас есть установка контейнера с классом, на который мы будем ссылаться позже!
Выполняя приведенный выше код, когда наша DOM готова, мы запускаем функцию, которая:
- Находит сценарий раздела about, в котором мы определяем, как будет выглядеть наш HTML-код для нашего шаблона.
- Скомпилируйте этот скрипт с помощью метода Handlebars.compile.
- Мы определяем объект с ключами, на которые мы ссылаемся в нашем теге сценария HTML со страницы Index.html.
- Скомпилируйте этот скрипт, передав наш объект
- Найдите наш контейнер с классом about-template и добавьте скомпилированный Handlebars.js в качестве HTML этого класса.
До
После
Теперь мы можем увидеть, как мы связали эти две вещи, и можем увидеть мощь такой системы! Ищите новый блог, в котором я увеличиваю сложность и действительно делаю что-то крутое!
