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

item.render

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.

todo.render

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.

CODE:

todo.render

result:

Named templates

Code:

Markup:

item.renderTo

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.

todo.renderTo

type.render

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

$data.renderTo

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

type.renderItems

$data.renderItemsTo

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.

$data.renderTo

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:

Markup:

Queryable.renderItemsTo

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:

Queryable.renderTo

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.