Блог

Использование темплейтов Handlebars с Webix UI

JavaScript-библиотека пользовательских компонентов Webix позволяет переопределить внешний вид многих элементов путем использования темплейтов. Например, во view:»tree» мы можем задать внешний вид элемента при помощи следующего темплейта:

webix.ui({
    view:"tree", data:tree_data,
    template:"{common.icon()} #value#"
});
simple template

 

Здесь вы можете видеть два главных компонента темплейтов Webix: вспомогательные средства и плейсхолдеры свойств. Вспомогательные средства — это предопределенные составляющие логики, которые отрисовывают некоторые общие элементы (иконка дерева в вышеприведенном примере). Плейсхолдеры свойств — это маркеры, которые будут заменены данными из связанного с ними объекта данных.

Используя в темплейте HTML теги, мы можем изменять внешний вид компонента:

webix.ui({
    view:"tree", data:tree_data,
    template:"{common.icon()} <button>#value#</button>"
});
webix template with buttons

 

или

webix.ui({
    view:"tree", data:tree_data,
    template:"{common.icon()} {common.checkbox()} &nbsp; <i>#value#</i>"
});
webix template tree checkbox

 

Однако, имеются некоторые ограничения. У описанного выше синтаксиса нет возможности задать логику, например, цикла, условий и т.д. Мы можем задать темплейт в виде функции, но это решение выглядит уже не так “элегантно”.

Почему Handlebars

Handlebars — это бесплатная библиотека веб-темплейтов, основанная на системе Mustache. Она позволяет веб-разработчикам создавать эффективные семантические темплейты.

Существует достаточно много механизмов шаблонов. Однако Handlebars отличается простым и, в то же время, многофункциональным синтаксисом, который можно использовать на многих платформах. Поэтому, если вы освоите Handlebars, полученные знания можно будет использовать в других проектах снова и снова.

Возьмем лучшее из двух библиотек

Для того, что бы использовать Handlebars, прежде всего, вам нужно подключить на страницу библиотеку Handlebars:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js"></script>

Теперь вы можете использовать Handlebars темплейты вместо темплейтов Webix, таким образом, как показано в следующем фрагменте кода:

webix.ui({ view:"list", data:list_data template:Handlebars.compile(" {{value}} <sup>By Handlebars</sup>") });

webix and handlebars templates
 
Пока особых отличий от темплейта Webix не видно. Давайте посмотрим на немного более сложный пример:

<script id="list-template" type="text/x-handlebars-template">
  {{#each films}}
    <h4><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h4>
    <div>Released in {{year}}, Rating: {{rating}}</div>
  {{/each}}
</script>
webix.ui({
    template:Handlebars.compile($("#list-template").html()),
    data:{ films: grid_data }
});
handlebars and webix power

Здесь мы поместили код темплейта в отдельный HTML-тег и просто ссылаемся на содержимое этого тега при описании UI (пользовательского интерфейса). Темплейт в теге содержит цикл для каждого элемента в коллекции фильмов, а также HTML форматирование элементов списка.

И даже больше

В данной статье мы показали лишь небольшую часть того, что можно было бы сделать, используя Webix UI и Handlebars. В реальности вы можете сделать намного больше.

Webix темплейт хорошо подходит для простой кастомизации. В случае, если необходимо получить более сложную логику создания темплейта, вы можете использовать темплейты Handlebar с пользовательскими компонентами Webix. Результаты вас впечатлят!

Автор
The following two tabs change content below.

Maksim Kozhukh

Основные инструменты – Javascript, HTML и CSS. В детстве был благовоспитанным мальчиком, но начал программировать калькуляторы, контроллеры, компьютеры, связался с программистами и покатился…
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit