Первоначально опубликовано johnshelb 12 марта 2017 г.
Рули для начинающих
На прошлой неделе у меня было очень трудное время, когда я пытался пройти уроки шаблона Handlebars в Learn. Слова просто поплыли передо мной, когда я попытался прочитать примеры, и в итоге пропустил лабораторную работу. Затем я был очень недоволен, обнаружив, что несколько последующих лабораторий требовали использования шаблона. Это была плохая неделя для всех. Но, на выходных я нашел туториалы и как-то стало намного понятнее. На самом деле, это не так уж и плохо. Итак, мы надеемся, что этот пост в блоге дойдет до тех, кто, как и я, изо всех сил пытался найти что-то, что превращает использование шаблонов Handlebars в ясное и простое для понимания руководство.
Концепция шаблона достаточно проста: он позволяет создавать динамический HTML-код, который можно повторно использовать в разных местах, заменяя динамические переменные в остальной части текста. Существуют некоторые процедурные требования для использования Handlebars, но если вы просто будете следовать инструкциям, все остальное будет довольно просто. Вот что нужно:
1. Загрузите рули с handlebarsjs.com. Поместите файл handlebars.js в папку js каталога вашего проекта.
2. В теле вашего HTML-файла:
a. Включите ссылки на руль и ваш файл javascript, добавив следующие теги в тело вашего html-файла:
б. Вам понадобится место для рендеринга вашего шаблона. Div с атрибутом id подойдет.
в. также в теле вашего html-файла создайте шаблон руля внутри другого тега script со следующими атрибутами:
Ваш шаблон может состоять из любого html, который вам нужен. Для частей, которые вы хотите сделать динамическими, просто выберите имя переменной и окружите эту переменную двойными фигурными скобками, например: {{variable}}. Вот пример простого шаблона:
3. В основном файле .js, таком как index.js:
a. Установите переменную (возможно, `шаблон`) и назначьте ей свой сценарий шаблона, и
б. Установите переменную, которой будет присвоена функция, компилирующая ваш шаблон (хорошее название для этого — `compiled`):
Теперь установите переменную, которая будет содержать информацию, которую вы хотите использовать для заполнения динамических частей шаблона. Информация должна быть отформатирована в объект, в котором ваши переменные Handlebars являются ключами, а текст, которым вы хотите заменить эти переменные, является значениями. Например,
Затем, чтобы поместить шаблонный html в то место на странице, где вы хотите, чтобы он отображался, вызовите скомпилированную функцию, передав объект с вашими данными:
Теперь, если вы хотите поместить имя и день рождения другого человека в другое место вашего документа, вы можете установить другой объект, например
и позвони
Handlebars также поставляется с некоторыми хорошими встроенными помощниками, а также дает вам возможность создавать свои собственные пользовательские помощники. Одним из самых полезных помощников является метод `each`. Если ваша переменная ссылается на массив информации, например:
В шаблоне у вас может быть что-то вроде этого:
Это будет перебирать массив, установленный в var info, создавая элемент списка для каждого элемента массива:
Наши любимые учителя
Стивен
Джесс
Ники
У Handlebars есть и другие вспомогательные методы, в том числе #if, и вы даже можете создавать свои собственные вспомогательные методы. Но этого должно быть достаточно, чтобы вы начали!
