Handlebars template support in JayData

Author: Peter Aron Zentai November 27th, 2012

We have a new adapter module that supports closer integration with the Handlebar template engine. With this you can have your online or offline data converted to HTML in a matter of seconds. Beyond simple HTML rendering the Handlebars module provides some basic but very effective support for commanding: handling user interface events in the scope of data.

The Handlebars module works both with the JayData Entity Classes and also with the JayData ItemStore APIs.

Before we begin…

These are the necessary files you’ll need for the below examples to work. All major HTML5 compatible desktop and mobile browsers are supported, plus Internet Explorer 9.  By default data defined and stored in the example code are put into the best local data storage your browser offers. See this in more details on where your data is actually stored.

Display a solo data item


Data objects – entities – defined and created with JayData now have a render method inherited from the $data.Entity base class. Without parameters the render method uses the default template for the given data type. The type’s default template is the one with an id value that matches the type’s name.


Defining types with $data.define the function results the same JayData classes as when using the $data.Entity.extend method.

Render with template markup

You can specify templates inline, by calling the render method with the template markup. The following example saves a new Todo item to the default item store (without any configuration this is the browser’s local data storage) then displays the new item in a list. Notice that the Id field is automatically populated by the data storage.





Named templates




Spare some extra lines with the renderTo method. The renderTo function executes the render method then appends the result to the selected node.


The renderTo method has 3 parameters: selector, template and renderMode. The renderMode parameter defaults to “replaceContent” with “replace”, “append”,”after”,”before” being the other options.

This example uses the Entity Classes API to list all Todo items.



Sometimes the data in your hand is just raw json). This case you can use the static render method on the type.


This one is an interesting beast. The renderTo static method on the $data global is provided for a more convenient fluent coding experience. Its return value is actually a function that plays nicely with the promise oriented fluent api.

The above code is equivalent with this:

$data(“Todo”) .save({ Task: “Step 2: build your code” }) .then(function (todo) { todo.renderTo(“#todoList”); return todo; }).then(/* continue with something */);

With the Entity Classes API:

Displaying a list of data items



Similar to $data.renderTo, the $data.renderItemsTo deals with the individual items and provides for cleaner code altogether. The above example is equivalent with this:

The same syntax work with the Entity Classes API too. This example falls back to the Todo default template.


To deal with the result collection and not with individual items use the $data.renderTo method with a template that is executed around an array of items:



This is solely for the Entit Classes API (as the ItemStore hides the actual Queryable instance from you). The above  code can be written like this:


If you found this article useful read more on Handlebars helpers and commanding to see how to develop a master-detail scenario with four lines of code.