Kandybars NPM | npm.io

Kandybars

GitHub package.json version GitHub GitHub last commit npm

A template engine based on mustache syntax for all purposes.

Create a template in HTML

Each template is wrapped in a template html tag and referenced by a unique name using the name attribute.

<template name="welcome">
    <p>Welcome</p>
</template>

Create a template in JavaScript

This is not the common way, but you can create a template directly from JavaScript.

import Kandybars from "kandybars";

Kandybars.registerTemplate('welcome', '<p>Welcome</p>');

Load templates from a string

You can also load templates contained in a string by parsing it.

import Kandybars from "kandybars";

Kandybars.parseTemplates('<template name="hello">Hello World</template>');
Kandybars.render('hello');

Comments

All comments are removed from the code when the template is rendered.

<template name="secret">
    {{! this comment will not appear in the final HTML}}
    <p>{{secret}}</p>
</template>

Variables

<template name="hello">
    <p>Hello {{user.name}}</p>
</template>

import Kandybars from "kandybars";

var tpl = Kandybars.render('hello', {
    user: {name: "Karl"}
});

For-Each blocks

Loops are done easily using javascript arrays.

<template name="colors">
    <ul>
        {{#each colors}}
        <li>{{name}} : {{hexCode}}</li>
        {{/each}}
    </ul>
</template>

import Kandybars from "kandybars";

var tpl = Kandybars.render('colors', {
    colors: [
        {
            name: "red",
            hexCode: "ff0000"
        },
        {
            name: "green",
            hexCode: "00ff00"
        },
        {
            name: "blue",
            hexCode: "0000ff"
        }
    ]
});

Conditional blocks

It is possible to display data depending of the result of an expression.

<template name="messageCounter">
    {{#if messageCount > 0}}
    <p>You have {{messageCount}} messages</p>
    {{else}}
    <p>You don't have any messages</p>
    {{/if}}
</template>

import Kandybars from "kandybars";

var tpl = Kandybars.render('messageCounter', {
    messageCount: 19
});

Helpers

Helpers are like functions but they are used directly inside templates, they accept arguments.

<template name="interest">
    <p>I love {{uppercase interest}}</p>
</template>

import Kandybars from "kandybars";

Kandybars.registerHelper('uppercase', function(word) {
    return word ? word.toUpperCase() : "";
});

var tpl = Kandybars.render('interest', {
    interest: "coding"
});

Evaluations

Evals allow to get the result of an expression.

<template name="formula">
    <p>x + y - 0.5 = {{eval x + y - 0.5}}</p>
</template>

import Kandybars from "kandybars";

var tpl = Kandybars.render('formula', {
    x: 100,
    y: Math.random() * 10
});

Partials

Templates that are already loaded can be included inside other templates by using a special helper.

<template name="colors">
    <ul>
    {{#each colors}}
    {{> colorListItem}}
    {{/each}}
    </ul>
</template>

<template name="colorListItem">
    <li>{{name}} : {{hexCode}}</li>
</template>

import Kandybars from "kandybars";

var tpl = Kandybars.render('colors', {
    colors: [
        {
            name: "red",
            hexCode: "ff0000"
        },
        {
            name: "green",
            hexCode: "00ff00"
        },
        {
            name: "blue",
            hexCode: "0000ff"
        }
    ]
});