Many improvements to intergrated Handlebars template engine:
New OpenWGA specific Handlebars Helper:
- context
- encode
- nav
- files
- format
- include
In addition the existing helper "url" has also be improved.
New Methods in AFW.Handlebars:
- AFW.Handlebars.registerHelper()
- AFW.Handlebars.resourceTemplate() (replaces existing AFW.Handlebars.fileTemplate())
OpenWGA specific Handlebars helper
Handlebars contains some useful internal helpers like {{#each}}, {{#if}}, {{#with}}, ... and we now added some even more useful OpenWGA specific ones.
Assume you render a Handlebars template with an OpenWGA TMLContext as input:
AFW.Handlebars.stringTemplate(template, context("name:home"))
In this situation the new helper enables you to access OpenWGA recources inside the template.
context
{{#context "db:some-db/name:products"}}
{{TITLE}}
{{/context}}
{{#context "relation:address"}}
{{zip}} {{city}}
<br>
{{street}}
{{/context}}
The context helper is called with a context expression as parameter. Inside the {{#context}} block you have access to items and metas of the addressed OpenWGA content.
encode
{{#encode "markdown"}}
hallo {{name}}
=========
- list 1
- list 2
{{/encode}}
The block marked with {{#encode}} is encoded whit the OpenWGA encoder you specified as parameter.
nav
<ul>
{{#nav "siblings" role="none" order="TITLE(asc)"}}
<li><a href="{{url}}">{{TITLE}}</a></li>
{{/nav}}
</ul>
The nav helper lets you navigate through content lists just like <tml:navigator> does.
The first parameter is the type of navigator (children, siblings, path ...). Optionally you can specify any allowed <tml:navigator>-Attribute as what Handlebars calls "hash-parameter" (key-value pairs).
files
<blockquote>
{{#files}}
<p>
{{name}}, {{size}}, {{url derivate="width~200"}}
<br>
{{#with meta}}
{{mimeType}}, {{displayWidth}}x{{displayHeight}} Pixel
{{/with}}
</p>
{{/files}}
</blockquote>
If the current Handlebars-context is a TMLContext you can iterate through the list of files of the current content.
Inside a {{#files}} context you have access to the following fields:
- name (the filename)
- size (the size of the file)
- url (the URL to the file)
- meta (the WGFileMetaData object of the file, containing additional information of the file)
Alternatively you can specify a specific filename as parameter to access just this file:
{{#files "chart.jpg"}}
File {{name}} has {{format size "#.#00"}} bytes.
{{/files}}
format
{{format CREATED "dd.MM.yyyy"}}
{{format price "#,##0.00"}} EUR
The format helper lets you format any value using the OpenWGA WGA.format() method.
include
{{include "/some/other/template.html"}}
{{include ref="db=demo /overlay/handlebars/test.html"}}
This helper lets you include another Handlebars template into the current one. The included template will inherit the current Handlebars context.
If you include a template from the same App you can specify the path as String parameter. If you want to access a template contained in another App you have to specify this as ref-hash-parameter and use OpenWGA's ResouceRef syntax (same as in SASS and JSMIN).
Sample:
<table>
<tr>
<td>{{#include "header.html"}}</td>
</tr>
<tr>
<td>{{#include "body.html"}}</td>
</tr>
<tr>
<td>{{#include "footer.html"}}</td>
</tr>
</table>
url
{{url approved=true user="innovationgate" page=5}}
The url helper now lets you specify any URL-parameter as Handlebars hash parameter.
AFW.Handlebars.registerHelper
This method lets you define your own helper functions.
Sample:
AFW.Handlebars.registerHelper("filesize", function(bytes){
var kb = bytes/1000;
if(kb>1000)
return parseInt(kb/1000) + " MB"
else return parseInt(kb) + " KB"
})
Usage in Template:
{{#files "chart.png"}}
The size of {{name}} is {{filesize size}}
{{/files}}
Output:
The size of chart.png is 250 KB
AFW.Handlebars.resourceTemplate
AFW.Handlebars.resourceTemplate("db=demo overlay/handlebars/test.html", {
company: "Innovation Gate"
})
This method enables you to read a template from any resource using the ResouceRef syntax (same as in SASS and JSMIN).
This methods replaces the existing AFW.Handlebars.fileTemplate() method, that is restricted to file-container of the current App and therefore now is deprecated.