Templating

Handlebars

Handlebars is a Minimal Logic-less Templating Engine widely used on the web. Check handlebarsjs.com for details and documentation. Unlike Jade (or Haml) the Engine does not use its own template-language. The developer has to write proper HTML with added template-variables & helpers. This concept brings total control to the output.

Parsing Data

When rendering a page or a module the system uses the .hbs file and the corresponding .data.js file to parse the item.

Dynamic Partials

In order to include partial based on data the handlebars helper dynamicPartial can be used. please follow the examples on this page: Handlebars Page

Passing data to partials

Data is passed either by the global data object, by providing an object or by passing it directly as options in the include tag. By default the current context is passed to the the partial, you replace id by passing another context-object).

Object: {{> "modules/mymodule/mymodule" context}}

Params: {{> "modules/mymodule/mymodule" title="Today is Thursday" state="cloudy"}}

Precompiled Templates (JS)

To use precompiled Templates (bundled with the js-package) you need to do these things:

creating a js-template

• create a handlerbars file with this pattern _modulename_partial.js.hbs inside the module-folder.
• write your template using handlebars syntax. example: https://github.com/unic/estatico/blob/develop/source/demo/modules/slideshow/_slideshow_slide.js.hbs

<div class="module_partial">Hello {{label}}</div>

Using Precompiled template

Add references to your module.

var templates = {
    somePartial: require('./_module_partial.js.hbs')
};

require a handlebars template this way automatically makes it usable as handlebars-template inside your js-module.

var data = {
  label: 'estatico'
}

var templateOutput = templates.somePartial(data);
// output: <div class="module_partial">Hello estatico</div>

An example can be seen in the slideshow-demo-module: slideshow.js#L6 and slideshow.js#L104