https://github.com/jalik/kandybars

A template engine for all purposes.
https://github.com/jalik/kandybars

engine handlebars html template

Last synced: about 2 months ago
JSON representation

A template engine for all purposes.

• Host: GitHub
• URL: https://github.com/jalik/kandybars
• Owner: jalik
• License: mit
• Created: 2014-08-27T08:44:13.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T03:59:47.000Z (about 2 years ago)
• Last Synced: 2024-11-14T13:44:02.734Z (3 months ago)
• Topics: engine, handlebars, html, template
• Language: JavaScript
• Homepage:
• Size: 1.19 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Kandybars

![GitHub package.json version](https://img.shields.io/github/package-json/v/jalik/kandybars.svg)

[![Build Status](https://travis-ci.com/jalik/kandybars.svg?branch=master)](https://travis-ci.com/jalik/kandybars)

![GitHub](https://img.shields.io/github/license/jalik/kandybars.svg)

![GitHub last commit](https://img.shields.io/github/last-commit/jalik/kandybars.svg)

[![GitHub issues](https://img.shields.io/github/issues/jalik/kandybars.svg)](https://github.com/jalik/kandybars/issues)

![npm](https://img.shields.io/npm/dt/kandybars.svg)

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.

```html

    
Welcome


```

## Create a template in JavaScript

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

```js

import Kandybars from "kandybars";

Kandybars.registerTemplate('welcome', '
Welcome
');

```


## Load templates from a string

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

```js

import Kandybars from "kandybars";

Kandybars.parseTemplates('Hello World');

Kandybars.render('hello');

```

## Comments

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

```html

    {{! this comment will not appear in the final HTML}}

    
{{secret}}


```

## Variables

```html

    
Hello {{user.name}}


```

```js

import Kandybars from "kandybars";

var tpl = Kandybars.render('hello', {

    user: {name: "Karl"}

});

```

## For-Each blocks

Loops are done easily using javascript arrays.

```html

    


        {{#each colors}}

        
{{name}} : {{hexCode}}

        {{/each}}

    


```

```js

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.

```html

    {{#if messageCount > 0}}

    
You have {{messageCount}} messages

    {{else}}

    
You don't have any messages

    {{/if}}


```

```js

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.

```html

    
I love {{uppercase interest}}


```

```js

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.

```html

    
x + y - 0.5 = {{eval x + y - 0.5}}


```

```js

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.

```html

    


    {{#each colors}}

    {{> colorListItem}}

    {{/each}}

    


    
{{name}} : {{hexCode}}


```

```js

import Kandybars from "kandybars";

var tpl = Kandybars.render('colors', {

    colors: [

        {

            name: "red",

            hexCode: "ff0000"

        },

        {

            name: "green",

            hexCode: "00ff00"

        },

        {

            name: "blue",

            hexCode: "0000ff"

        }

    ]

});

```

## Changelog

History of releases is in the [changelog](./CHANGELOG.md).

## License

The code is released under the [MIT License](http://www.opensource.org/licenses/MIT).

If you find this lib useful and would like to support my work, donations are welcome :)

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7UABXKNGPQBVJ)