Руководство для начинающих по использованию Handlebars.js

В этом посте мы рассмотрим Рули, движок шаблонов JavaScript, основанный на Усы, Он имеет те же функциональные возможности, что и усы, но обладает рядом новых функций. Handlebars – это инструмент для создания шаблонов, особенно для отображения серийных данных в форме JSON, который сегодня является распространенной формой форматирования данных, используемой в API веб-приложения. Проверьте это вступительный пост, что объясняет JSON очень хорошо.

В этой статье мы расскажем вам о некоторых основных функциях Handlebars, а также приведем реальный пример в конце этой статьи. Если это то, что вы хотите узнать, тогда давайте начнем.
Начиная
Для начала, давайте перейдем к Рули веб-сайт и скачать файл с исходным кодом, handlebars.js. Поместите файл в соответствующую папку вашего проекта. Ссылка на файл из документов HTML. Вы можете добавить ссылку внутри тега head или перед,

Кроме того, вы также можете связаться с источником руля из CDN.

Когда это будет сделано, мы можем начать создавать шаблон.
Основной шаблон
Давайте добавим наши данные: имя, возраст и откуда человек.

var dataSource = {
“имя”: “Джо Блоггс”,
    “возраст”: “19”,
    “из”: “Великобритания”
}

Эти данные служат примером. Как уже упоминалось, вы можете извлечь аналогичные формы данных из большинства веб-приложений, которые предоставляют открытый API, таких как щебет, Instagram, Flickr а также Dribbble – хотя вы получите больше строк данных, чем показано выше. Кроме того, вы можете попробовать Генератор JSON генерировать случайные данные.
Шаблон
Получив данные, мы можем создать шаблон для размещения этих данных. Давайте посмотрим на следующий код.

Шаблон Handlebars устанавливается внутри тега script с помощью специального типа: text / x-handlebars-template и, предпочтительно, также с идентификатором, поскольку при выборе элемента с Я БЫ в JavaScript технически проще и быстрее, чем при использовании учебный класс,

Хотя каждый из данных объявлен в двойных фигурных скобках, {{…}}; это также известно как выражение Handlebars.

Однако прежде чем мы увидим результат в браузере, мы должны компиляции Эти коды объединяют данные в шаблон.
составление
Давайте сохраним шаблон в переменной JavaScript, вот так.

var template = $ (‘# template’). html ();

Затем мы помещаем переменную шаблона в Handlebars.compile () для компиляции шаблона.

var compile = Handlebars.compile (шаблон);

Самая важная вещь из приведенного выше кода – это имя переменной compile. Мы будем использовать его вместе с нашими данными для получения окончательного результата, например:

var result = compile (dataSource);

Наконец, мы поместили его в #content с помощью метода jQuery .html ().

$ ( ‘# Содержание’) HTML (результат).

Это даст нам следующий результат в браузерах.

HTML Escape
Иногда наши данные могут содержать теги HTML, например:

var dataSource = {
“имя”: “Джо Блоггс»,
    “возраст”: “19”,
    “из”: “Великобритания”
}

По умолчанию Handlebars избегают этих тегов. Они превратят тег в свои юридическое лицо, < will turn into< while > превратится в & gt ;. Таким образом, мы получим неожиданный результат, как показано ниже, в браузерах.

Чтобы препятствовать тому, чтобы Handlebars преобразовывали теги HTML в их символ сущности, и просто обрабатывали их такими, какие они есть, мы используем тройные фигурные скобки {{{…}}} для объявления данных, например, так:

Привет, меня зовут {{{name}}}. …

Вот и вы! Тег заголовка теперь отображается правильно; имя отображается курсивом.

Условный Помощник
Опоры руля условный помощник (или также известный как условная функция). Эта функция является эксклюзивным дополнением к рулю, недоступным в усах. Условный помощник полезно для предотвращения рендеринга данных, если значение данных пустое. В качестве примера, давайте удалим значение из наших данных о возрасте.

var dataSource = {
“имя”: “Джо Блоггс”,
    “возраст”: “”,
    “из”: “Великобритания”
}

Мы используем условный помощник таким образом. Поскольку значение возраста не указано, мы не будем отображать строку с надписью I’m {{age}} ,.

{{#if age}} Я {{age}}, {{/ if}}

В браузерах будет отображена строка выше.

Кроме того, Handlebars также предоставит данные как пустые, если значение явно указано с помощью: undefined или false.
петля
Handlebars также поддерживает Loop. Как и в другом языке программирования, он используется для итерации ряда объектов. На данный момент у нас есть только один объект, содержащий три строки данных. Давайте расширим наш пример еще двумя объектами, вот так.

var data = [{
“name” : “Joe Bloggs”,
“age” : “19”,
“from” : “United Kingdom”
}, {
“name” : “Jane Doe”,
“age” : “21”,
“from” : “United State”
}, {
“name” : “John Doe”,
“age” : “20”,
“from” : “United Nation”
}];

Как у нас сейчас есть более одного объекта. Наш текущий шаблон больше не будет работать для рендеринга этих данных в шаблон. В этом случае мы должны использовать Handlebars Loop, обернуть наш шаблон в {{#each}} … {{/ each}}. Мы также можем изменить шаблон при необходимости.

В этом примере мы отобразим эти данные в виде списка.

Вот результат, который мы увидим в браузерах.

пример
Теперь давайте воплотим это в реальный пример. На этот раз мы хотим показать профиль от Forrst, центра для дизайнеров и разработчиков. Forrst предоставляет простой метод для извлечения их данных. В нашем случае мы можем использовать https://forrst.com/api/v2/users/info?username= enjusername} для получения профиля пользователя. Мы получим что-то похожее на эти данные ниже.

Примечание: фактические данные действительно длинные. Поэтому я должен раздеть некоторые из них, чтобы сделать его короче.

var forrstProfile = {
    “id”: 24606,
    “имя пользователя”: “jimmyliu”,
    “имя”: “Джимми Лю”,
    “url”: “http: / / forrst.com / people / jimmyliu”,
    «лайки»: «11»,
    «последователи»: «10»,
    «следующий»: «2»,
    “фотографии”: {
        “medium_url”: “https: / / secure.gravatar.com / avatar /3151a9294608c3143551aa265f00bf71.jpg? s = 75 & d = https: / / forrst.com / assets / images /default_75.jpg” ,
        “small_url”: “https: / / secure.gravatar.com / avatar /3151a9294608c3143551aa265f00bf71.jpg? s = 45 & d = https: / / forrst.com / assets / images /default_45.jpg” ,
        “thumb_url”: “https: / / secure.gravatar.com / avatar /3151a9294608c3143551aa265f00bf71.jpg? s = 25 & d = https: / / forrst.com / assets / images /default_25.jpg”
    },
    “био”: “Графический и веб-дизайнер из Купертино, штат Калифорния. Следи за мной на Твиттере @jimmyliu

П»,
    “is_a”: “разработчик и дизайнер”,
};

Мы поместим эти данные в этот шаблон.

Давайте скомпилируем их вместе, вот так.

var template = $ (‘# forrst-profile-template’). html ();
    var compile = Handlebars.compile (шаблон);
    var result = compile (forrstProfile);
    . $ ( ‘# Forrst’) HTML (результат);

С помощью пары строк CSS мы можем добиться более хорошего результата.

Вы можете скачать исходный код и посмотреть демо по этим ссылкам.
Последняя мысль
Ранее я использовал JQuery для шаблонов. Кажется, я делал это неправильно, так как мои коды выглядят как беспорядок. Когда у нас большой кусок данных, гораздо лучше и удобнее использовать Handlebars для шаблонов и их отображения. Поэтому я надеюсь, что это может быть хорошим ориентиром для вас, чтобы начать работу с Handlebars.

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script><script async defer src="https://platform.instagram.com/en_US/embeds.js"></script>