Template Engines

Working with Template Engines

Template Engines

Templates are used for custom elements. The main goal of template engines is, to have a seamless integration into your environment.

So for example, having a Twig template engine for Drupal or Symfony applications or Handlebars, Mustache for any applications.

There are built-in adapters for Twig, Handlebars and Mustache. But you can also create your own adapter.

Template Engines are defined in your gluebert instance.

Twig Template

Installation

Since gluebert does not create dependencies for all Template engines, you need to install them in your project separately.

npm install twig --save-dev

Add to the gluebert instance

import { Gluebert } from 'gluebert';
import { TwigTemplate } from 'gluebert/template';

import Twig from 'twig';

const MODULES = [];
const DATA = [];

const TEMPLATE = new TwigTemplate(Twig);

const gluebert = new Gluebert(MODULES, DATA)
    .setTemplateEngine(TEMPLATE)
    .start();

Usage Example

template.twig

<li class="ball {% if (number % 2) == 0 %}even{% else %}odd{% endif %}">
    {{ number }}
</li>

in the controller:

async _createBallElement(number) {
    const el = await this._elements.create('ball.element', {
        number: number,
    });
    
    if(el) {
        window.requestAnimationFrame(() => {
            document.body.appendChild(el);
        });
    }
    return this;
}

Handlebars

Installation

npm install handlebars --save-dev

Add to the gluebert instance

import { Gluebert } from 'gluebert';
import { HandlebarsTemplate } from 'gluebert/template';

import Handlebars from 'handlebars';

const MODULES = [];
const DATA = [];

const TEMPLATE = new HandlebarsTemplate(Handlebars);

const gluebert = new Gluebert(MODULES, DATA)
    .setTemplateEngine(TEMPLATE)
    .start();

Usage Example

template.hbs

<li class="ball {{ evenOddClass }}">
    {{ number }}
</li>

in the controller:

async _createBallElement(number) {
    const el = await this._elements.create('ball.element', {
        number: number,
        evenOddClass: () => {
            switch (number.number % 2) {
                case 1 :
                    return 'even';
                case 0 :
                    return 'odd';
                default :
                    return 'unknown';
                    break;
            }
        },
    });
    
    if(el) {
        window.requestAnimationFrame(() => {
            document.body.appendChild(el);
        });
    }
    return this;
}

Mustache

Installation

npm install mustache --save-dev

Add to the gluebert instance

import { Gluebert } from 'gluebert';
import { MustacheTemplate } from 'gluebert/template';

import Mustache from 'mustache';

const MODULES = [];
const DATA = [];

const TEMPLATE = new MustacheTemplate(Mustache);

const gluebert = new Gluebert(MODULES, DATA)
    .setTemplateEngine(TEMPLATE)
    .start();

Usage Example

template.mustache

<li class="ball {{ evenOddClass }}">
    {{ number }}
</li>

in the controller:

async _createBallElement(number) {
    const el = await this._elements.create('ball.element', {
        number: number,
        evenOddClass: () => {
            switch (number.number % 2) {
                case 1 :
                    return 'even';
                case 0 :
                    return 'odd';
                default :
                    return 'unknown';
                    break;
            }
        },
    });
    
    if(el) {
        window.requestAnimationFrame(() => {
            document.body.appendChild(el);
        });
    }
    return this;
}

Create your own Template Adapter

Despite of the built in adapters, you can create your own template adapter easily.

For this, lets create a new file called custom.template.js:

touch custom.template.js

Open the file and start with the followig self explaining lines:

import { TemplateAbstract } from './template.abstract';

class CustomTemplate extends TemplateAbstract {

    constructor(engine) {
        super(engine);
    }

    createView(template) {
        return () => {
            return {
                prettyRaw: (data) => {
                    return JSON.stringify([template, data]);
                },
            }
        };
    }
    
    render(view, data) {
        return view.prettyRaw(data);
    }

}

export {
    CustomTemplate,
};

Lets have a look at the constructor first.

There, we register the engine in the TemplateAbstract which is available later by this._engine.

Since this is just an adapter, the actual template engine should be programmed separately and passed in the Template at initialization (see the examples for Twig, Handlebars and Mustache above).

Next, there is a 2-Step process within template engines usually.

Step 1 actually prepares the template-markup and returns a function that can be used to pass data in and converts it to the converted template.

In the second step the actual transformation happens.

Add your custom template adapter to gluebert

import { Gluebert } from 'gluebert';
import { CustomTemplate } from './custom.template';

const MODULES = [];
const DATA = [];

const TEMPLATE = new CustomTemplate(null); // we do not need any dependency engine in the example

const gluebert = new Gluebert(MODULES, DATA)
    .setTemplateEngine(TEMPLATE)
    .start();

Well, although the output is not very impressive - anyway:

Usage Example

template.custom

<li class="ball"></li>

in the controller:

async _createBallElement(number) {
    const el = await this._elements.create('ball.element', {
        number: 23,
    });
    
    if(el) {
        window.requestAnimationFrame(() => {
            document.body.appendChild(el);
        });
    }
    return this;
}

The output would be something like:

["<li class="ball"></li>", { number: 23 }]

Ok, this CustomTemplate engine we have created above is useless. But should clearly show what’s going on in the background.


References and Examples

What Where
API Reference api.gluebert.com/TemplateAbstract.html
Twig Adapter github.com/wildhaber/gluebert/~/template/twig.template.js
Handlebars Adapter github.com/wildhaber/gluebert/~/template/handlebars.template.js
Mustache Adapter github.com/wildhaber/gluebert/~/template/mustache.template.js
npm Twig npmjs.com/package/twig
npm Handlebars npmjs.com/package/handlebars
npm Mustache npmjs.com/package/mustache