Blog

Using Handlebars Templates with Webix UI

March 28, 2014

JavaScript UI library Webix allows redefining the appearance of many elements through templating. For example, in tree view we can define the look of item through the following template:

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

 

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.

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

 

or

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

 

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.

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

Now you can use Handlebars templates instead of Webix templates like in the following piece of code:

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

webix and handlebars templates
 
So far it hasn’t differed a lot from Webix templates. Lets look at a slightly more complex example:

<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

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.

Written by
The following two tabs change content below.

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.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on del.icio.us Vote on Reddit