@zimpa/template

Install

Install the package by running npm install --save @zimpa/template.

Usage

This templating technique is inspired by the micro template from John Resig.

The idea is that you create a template tag somewhere in the DOM. In the template just use regular HTML. When you want to use a variable that must be injected in the HTML put it between {{ and }}.
Whenever you want to use loops or conditional statements, put these between {% and %}.

A very simple template could look like this.
``html

`

The template can now be created with:
`typescript
const tpl = new Template(document.querySelector('avatar-tpl').innerHTML);
`

Whenever you want to use the template you can trigger the rendering with:
`typescript
tpl.render({
image: '/assets/avatar.jpg',
lastName: 'Chase',
firstName: 'Chevy',
social_platforms: ['imdb'],
});
`

It's very important that all variables that are used in the template are provided to the render method as a key of the object provided.
If you don't want to have it a value assign null or undefined to the property. Make sure you check for the value in the template.

This will render the same avatar template without an image.
`typescript
tpl.render({
image: undefined,
lastName: 'Chase',
firstName: 'Chevy',
social_platforms: ['imdb'],
});
``