Project

Contents

Issue #00005021

Improved AFW.Handlebars Template Engine
AFW
Feature/Improvement

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.