Handlebars предоставляет необходимую мощность для создания семантических шаблонов эффективно без раздражения. Handlebars в основном совместим с шаблонами Mustache. В большинстве случаев можно заменить Mustache на Handlebars и продолжить использовать текущие шаблоны.
Просмотрите официальную страницу документации Handlebars по адресу handlebarsjs.com и попробуйте наш онлайн-демо.
См. нашу документацию по установке.
В общем, синтаксис шаблонов Handlebars.js является надмножеством синтаксиса шаблонов Mustache. Для базового синтаксиса см. manpage Mustache.
После того, как у вас есть шаблон, используйте метод Handlebars.compile
, чтобы скомпилировать
шаблон в функцию. Сгенерированная функция принимает аргумент контекста,
который будет использоваться для отображения шаблона.```js
var source = "
Привет, меня зовут {{name}}. Я из {{hometown}}. У меня есть " + "{{kids.length}} детей:
" + "var data = { "name": "Alan", "hometown": "Somewhere, TX", "kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]}; var result = template(data);
// Будет отображено: //
Привет, меня зовут Alan. Я из Somewhere, TX. У меня есть 2 детей:
//
Полная документация и дополнительные примеры доступны по адресу [handlebarsjs.com](https://handlebarsjs.com/).
Предварительная компиляция шаблонов
-----------------------------------
Handlebars позволяет предварительно компилировать шаблоны и включать их в виде кода JavaScript вместо шаблонов Handlebars, что позволяет ускорить время старта. Полные сведения расположены [здесь](https://handlebarsjs.com/installation/precompilation.html).
Различия между Handlebars.js и Mustache
---------------------------------------
Handlebars.js добавляет несколько дополнительных функций, чтобы сделать написание шаблонов проще, а также изменяет небольшие детали работы частичных шаблонов.
- [Вложенные пути](https://handlebarsjs.com/guide/expressions.html#path-expressions)
- [Помощники](https://handlebarsjs.com/guide/expressions.html#helpers)
- [Блоковые выражения](https://handlebarsjs.com/guide/block-helpers.html#basic-blocks)
- [Литеральные значения](https://handlebarsjs.com/guide/expressions.html#literal-segments)
- [Ограниченные комментарии](https://handlebarsjs.com/guide/#template-comments)
Блоковые выражения имеют ту же синтаксис, что и разделы Mustache, но не следует их путать. Разделы аналогичны неявному `each` или `with` в зависимости от входных данных и помощников, а помощники — это явные куски кода, которые могут реализовать любое поведение. [Спецификация Mustache](https://mustache.github.io/mustache.5.html) определяет точное поведение разделов. В случае конфликтов имен, помощники имеют приоритет.
### СовместимостьЕсть несколько поведений Mustache, которые Handlebars не реализует.
- Handlebars немного отличается от Mustache тем, что по умолчанию не выполняет рекурсивный поиск. Для включения этой функциональности необходимо установить флаг `compat` на этапе компиляции. Пользователи должны отметить, что включение этого флага влечет за собой дополнительные затраты по производительности. Точные затраты варьируются в зависимости от шаблона, но рекомендуется, чтобы операции, чувствительные к производительности, избегали этого режима и вместо этого использовали явные ссылки на пути.
- Не поддерживаются опциональные лямбды Mustache. Вместо этого Handlebars предоставляет собственное разрешение лямбд, которое следует поведению помощников.
- Handlebars не позволяет использовать пробелы между открывающим `{{` и символом команды, таким как `#`, `/` или `>`. Символ команды должен немедленно следовать за фигурными скобками, поэтому, например, `{{> partial }}` допустимо, а `{{ > partial }}` — нет.
- Альтернативные разделители не поддерживаются. Поддерживаемые окружения
--------------------------Handlebars был спроектирован для работы в любом окружении ECMAScript 2020. Это включает
- Node.js
- Chrome
- Firefox
- Safari
- Edge
Если вам нужно поддерживать более старые окружения, используйте версию Handlebars 4.
Производительность
-------------------
В приблизительном тесте производительности предварительно скомпилированные шаблоны Handlebars.js (в оригинальной версии Handlebars.js) отрисовывались примерно в два раза быстрее, чем шаблоны Mustache. Это было бы жаль, если бы это было иначе, так как они были предварительно скомпилированы, но различие в архитектуре действительно имеет значительные преимущества по производительности. Justin Marney, также известный как [gotascii](http://github.com/gotascii), подтвердил это с помощью [независимого теста](http://sorescode.com/2010/09/12/benchmarks.html). Переписанный Handlebars (текущая версия) работает быстрее, чем старая версия, с многими тестами производительности, которые показывают скорость в 5-7 раз выше по сравнению с аналогичными Mustache.
Обновление
----------
См. [release-notes.md](https://github.com/handlebars-lang/handlebars.js/blob/master/release-notes.md) для примечаний об обновлении.Если вы используете Handlebars в производственных целях, регулярно проверяйте проблемы, помеченные как [возможно нарушающие](https://github.com/handlebars-lang/handlebars.js/issues?q=is%3Aopen+is%3Aissue+label%3A%22possibly+breaking%22). Если к проблеме применен этот тег, это означает, что запрошенное изменение, вероятно, не является разрушающим, но поскольку Handlebars широко используется многими людьми, всегда есть шанс, что это нарушит сборку кого-то.Известные проблемы
------------------
См. [FAQ.md](https://github.com/handlebars-lang/handlebars.js/blob/master/FAQ.md) для известных проблем и распространенных ошибок.Handlebars в реальном мире
--------------------------
* [apiDoc](https://github.com/apidoc/apidoc) apiDoc использует Handlebars в качестве парсингового движка для генерации представления документации API.
* [Assemble](https://assemble.io), от [@jonschlinkert](https://github.com/jonschlinkert) и [@doowb](https://github.com/doowb), это генератор статических сайтов, использующий Handlebars.js в качестве движка шаблонов.
* [CoSchedule](https://coschedule.com) Редакционный календарь для WordPress, использующий Handlebars.js.
* [Ember.js](https://www.emberjs.com) делает Handlebars.js основным способом структурирования ваших представлений, а также поддерживает автоматическое привязывание данных.
* [express-handlebars](https://github.com/express-handlebars/express-handlebars) Движок представлений Handlebars для Express, который не вызывает раздражения.
* [express-hbs](https://github.com/TryGhost/express-hbs) Движок шаблонов Handlebars для Express с наследованием, частями, локализацией и асинхронными помощниками.
* [Ghost](https://ghost.org/) Простая платформа для блогов.
* [handlebars-action](https://github.com/marketplace/actions/handlebars-action) Действие GitHub для преобразования файлов в вашем репозитории с использованием шаблонов Handlebars.
* [handlebars_assets](https://github.com/leshill/handlebars_assets) Gem для Rails Asset Pipeline от Les Hill (@leshill).
* [handlebars-helpers](https://github.com/assemble/handlebars-helpers) Обширная библиотека с более чем 100 помощниками Handlebars.
* [handlebars-layouts](https://github.com/shannonmoeller/handlebars-layouts) Набор помощников, реализующих расширяемые и встраиваемые блоки представлений, как это реализовано в других популярных языках шаблонов.
* [handlebars-loader](https://github.com/com/pcardune/handlebars-loader) Загрузчик шаблонов Handlebars для webpack.
* [handlebars-wax](https://github.com/shannonmoeller/handlebars-wax) Недостающий API Handlebars. Простая регистрация данных, частей, помощников и декораторов с использованием файловых системных шаблонов, модулей и простых объектов JavaScript.
* [hbs](https://github.com/pillarjs/hbs) Адаптер для движка представлений Handlebars.js для Express.js от Don Park.
* [html-bundler-webpack-plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) Плагин webpack для компиляции шаблонов, [поддерживает Handlebars](https://github.com/webdiscus/html-bundler-webpack-plugin#using-template-handlebars).
* [incremental-bars](https://github.com/atomictag/incremental-bars) Добавляет поддержку [incremental-dom](https://github.com/google/incremental-dom) как целевого шаблона для Handlebars.
* [jblotus](https://github.com/jblotus) создал [http://tryhandlebarsjs.com](http://tryhandlebarsjs.com) для тех, кто хочет попробовать Handlebars.js в своем браузере.
* [jQuery плагин](https://71104.github.io/jquery-handlebars/) позволяет использовать Handlebars.js с [jQuery](http://jquery.com/).
* [just-handlebars-helpers](https://github.com/leapfrogtechnology/just-handlebars-helpers) Полностью протестированное легковесное пакет с общими Handlebars помощниками.
* [koa-hbs](https://github.com/jwilm/koa-hbs) [koa](https://github.com/koajs/koa) генератор основанный рендерер для Handlebars.js.
* [Marionette.Handlebars](https://github.com/hashchange/marionette.handlebars) добавляет поддержку для Handlebars и Mustache шаблонов к Marionette.
* [openVALIDATION](https://github.com/openvalidation/openvalidation) компилятор естественного языка для правил валидации. Генерирует программный код на Java, JavaScript, C#, Python и Rust с помощью Handlebars.
* [Plop](https://plopjs.com/)com/) это микроплатформа для генерации файлов с уровнем унификации.
* [promised-handlebars](https://github.com/nknapp/promised-handlebars) это обёртка для Handlebars, которая позволяет помощникам возвращать Promises.
* [sammy.js](https://github.com/quirkey/sammy) от Аарона Квинта, также известного как quirkey, поддерживает Handlebars. Sammy.js использует Handlebars как один из его шаблонных плагинов.
* [Swag](https://github.com/elving/swag) от [@elving](https://github.com/elving) это растущая коллекция помощников для handlebars.js. Добавьте вашим шаблонам handlebars.js немного swag, сын!
* [SproutCore](https://www.sproutcore.com) использует Handlebars.js как основной шаблонный движок, расширяя его с поддержкой автоматического привязывания данных.
* [vite-plugin-handlebars](https://github.com/alexlafroscia/vite-plugin-handlebars) Пакет для Vite 2. Позволяет запускать ваши HTML файлы через компилятор Handlebars.
* [YUI](https://yuilibrary.com/yui/docs/handlebars/) реализует порт handlebars. Внешние ресурсы
----------------* [Gist о синхронной и асинхронной загрузке внешних шаблонов Handlebars](https://gist.github.com/2287070)
Есть проект, использующий Handlebars? Отправьте нам [pull request][pull-request]!
Лицензия
--------
Handlebars.js распространяется под лицензией MIT.
[pull-request]: https://github.com/handlebars-lang/handlebars.js/pull/new/master
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )