JavaScript-библиотека пользовательских компонентов Webix позволяет переопределить внешний вид многих элементов путем использования темплейтов. Например, во view:»tree» мы можем задать внешний вид элемента при помощи следующего темплейта:
view:"tree", data:tree_data,
template:"{common.icon()} #value#"
});
Здесь вы можете видеть два главных компонента темплейтов Webix: вспомогательные средства и плейсхолдеры свойств. Вспомогательные средства — это предопределенные составляющие логики, которые отрисовывают некоторые общие элементы (иконка дерева в вышеприведенном примере). Плейсхолдеры свойств — это маркеры, которые будут заменены данными из связанного с ними объекта данных.
Используя в темплейте HTML теги, мы можем изменять внешний вид компонента:
view:"tree", data:tree_data,
template:"{common.icon()} <button>#value#</button>"
});
или
view:"tree", data:tree_data,
template:"{common.icon()} {common.checkbox()} <i>#value#</i>"
});
Однако, имеются некоторые ограничения. У описанного выше синтаксиса нет возможности задать логику, например, цикла, условий и т.д. Мы можем задать темплейт в виде функции, но это решение выглядит уже не так “элегантно”.
Почему Handlebars
Handlebars — это бесплатная библиотека веб-темплейтов, основанная на системе Mustache. Она позволяет веб-разработчикам создавать эффективные семантические темплейты.
Существует достаточно много механизмов шаблонов. Однако Handlebars отличается простым и, в то же время, многофункциональным синтаксисом, который можно использовать на многих платформах. Поэтому, если вы освоите Handlebars, полученные знания можно будет использовать в других проектах снова и снова.
Возьмем лучшее из двух библиотек
Для того, что бы использовать Handlebars, прежде всего, вам нужно подключить на страницу библиотеку Handlebars:
Теперь вы можете использовать Handlebars темплейты вместо темплейтов Webix, таким образом, как показано в следующем фрагменте кода:
Пока особых отличий от темплейта Webix не видно. Давайте посмотрим на немного более сложный пример:
{{#each films}}
<h4><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h4>
<div>Released in {{year}}, Rating: {{rating}}</div>
{{/each}}
</script>
template:Handlebars.compile($("#list-template").html()),
data:{ films: grid_data }
});
Здесь мы поместили код темплейта в отдельный HTML-тег и просто ссылаемся на содержимое этого тега при описании UI (пользовательского интерфейса). Темплейт в теге содержит цикл для каждого элемента в коллекции фильмов, а также HTML форматирование элементов списка.
И даже больше
В данной статье мы показали лишь небольшую часть того, что можно было бы сделать, используя Webix UI и Handlebars. В реальности вы можете сделать намного больше.
Webix темплейт хорошо подходит для простой кастомизации. В случае, если необходимо получить более сложную логику создания темплейта, вы можете использовать темплейты Handlebar с пользовательскими компонентами Webix. Результаты вас впечатлят!
