Here you can see the two main components of webix templates: common helpers and property placeholders. Common helpers are predefined pieces of logic which renders some common elements (tree icon in the above case). Property placeholders are markers that will be replaced with data from related data object.
By using html tags in the template we can change the look of component in many ways.

Still we are limited. The above syntax doesn’t provide a way to define logic, e.g., loops, conditions, etc. We can define a template as a function but this soultion is not so elegant as it could be.

Why Handlebars

Handlebars is a free semantic web template system based on Mustache. It provides web developers with the ability to build semantic templates advantageously with no frustration.

There are quite a lot of template engines. But Handlebars has simple and at the same time powerful syntax that is available on many platforms. So if you master them, this knowledge may be reused in other projects.

Best of the Two Worlds

To use Handlebars, firstly you need to include the Handlebars library on the page.

Here we have placed the code of the template in a separate html tag, and just referenced the content of that tag while describing UI. The template in tag contains a loop for each item in the collection of films and some html formatting.

And even more

There are a lot of things which can be done with Webix UI and Handlebars, we’ve shown you only a small part of them.

Webix template is good for simple customizations. If you want to have more complex templating logic you can use Handlebars templates with Webix UI. The results will impress you.

Maksim Kozhukh

Pragmatic software developer with more than 12 years of web development experience. Prefers to work with Javascript and HTML. Maksim has worked with lots of different technologies from nearly forgotten ColdFustion to the bleeding edge of NodeJS and Go.