@axel669/beardjs v0.3.0

BeardJS

A template engine that's made of beards instead of mustaches.

Usage

Syntax

Values

Print out html-escaped values by surrounding them with short beards.

<div>{| data.value |}</div>
<div>{| data.otherValue |}</div>
<div>{| data.count * 3.14 |} </div>

HTML Values

Print out raw html (unescaped) values by adding some mutton chops.

<div>{|# data.rawHTML |}</div>

Iteration

Iterate over objects by using longer beards.

Iterate over lists
<ul>
    {{| for item in data.list |}}
        <li>{| item |}</li>
    {{| / ||}
</ul>

Iterate over Maps or any other structure that supports for...of
<ul>
    {{| for [key, valueHTML] in data.map |}}
        <li>{| key |}: {|# valueHTML |}</li>
    {{| / ||}
</ul>

Conditional

Conditionals also use the longer beard syntax.

<ul>
    {{| for cpu in data.cpus |}}
        <li>
            {| cpu.name |}:
            {{| if cpu.age < 3 |}}
                <div>Modern CPU \o/</div>
            {{| else |}}
                <div>Old CPU :(</div>
            {{| / |}}
        </li>
    {{| / |}}
</ul>

JavaScript

Use thinner, long beards to insert raw JS into the template.

={| const num = Math.random(); |}=
<div>
    Random Number: {| num |}
</div>