higanbana

A template engine of express framework

Usage no npm install needed!

<script type="module">
  import higanbana from 'https://cdn.skypack.dev/higanbana';
</script>

README

Higanbana Template Engine

A template engine of express framework

You cand add properties to html tags to render templates, like :

<a href="{{urls.home}}">Home</a>
<a href="{{urls.login}}" hi-if="session.user">Login</a>

中文文档

Install

npm install --save higanbana

And then, you can configure your template engine in express like :

app.engine('html', require('higanbana')())		//not only "html", others are ok

For more information, see http://expressjs.com

Usage - Print

Using {{ $val }} to print a value to html,like:

<div>{{user.name.first}} {{user.name.last}}</div>

And you can write expressions into {{}}, such as:

<div>{{num1}} + {{num2}} = {{num1 + num2}}</div>

Usage - Conditions

Add hi-if、hi-else、hi-show、hi-hide properties on html tag to set if the tag will be rendered, Examples:

<div>
    <!-- ony if -->
    <div hi-if="a>0">a is great than 0</div>

    <!-- if and else -->
    <div hi-if="a>0">a is great than 0</div>
    <div hi-else="a==0">a is equals to 0</div>  <!-- hi-else="xxxx" means else if -->
    <div hi-else>a is little than 0</div>        <!-- hi-else means else -->

    <!-- show and hide -->
    <div hi-show="a==40">a is equals to 40</div>
    <div hi-hide="a==40">a is not equals to 40</div>
<div>

Usage - Loop

Using hi-for property to print a array, a object, a string, a range.

if a number is given, that means a range of [0~n).

Examples:

<!-- print array without index -->
<table>
    <tr hi-for="user in users">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
    </tr>
</table>

<!-- print array with index -->
<table>
    <tr hi-for="(user, index) in users">
        <td>{{index+1}}</td>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
    </tr>
</table>

<!-- print object without keys -->
<div hi-for="item in userInfo">
    {{item}}
</div>

<!-- print object with keys -->
<div hi-for="(item, key) in userInfo">
    {{key}}:{{item}}
</div>

<!-- and more -->
<table>
    <tr hi-for="(item, key) in users.filter(u=>u.gender=='男')">
        <td>{{index+1}}</td>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
    </tr>
</table>

<!-- using range -->
<div hi-for="num1 in 4">  <!-- 0, 1, 2, 3 -->
    <div hi-for="num2 in -4" style="display:inline-block; width:100px"> 	<!-- 0, -1, -2, -3 -->
        <span>{{ num1 }}</span>
        <span>{{ (num2>=0) ? '+' : '-' }}</span>
        <span>{{ Math.abs(num2) }}</span>
        <span>=</span>
        <span>{{ num1+num2 }}</span>
    </div>
</div>

<!-- characters of string -->
<span hi-for="ch in 'ABCDE'" style="padding:0 5px;">{{ch}}</span>

Usage - Range

Using mkrange(from:number, to?:number):Array function to create a range, like:

mkrange(1, 3)               // 1, 2
mkrange(3)                  // 0, 1, 2
mkrange(3, 0)               // 3, 2, 1

Example:

<div hi-for="number in mkrange(10)">{{number}}</div>

Usage - Value

Using val(v:any):any function, you can create any value, but it is not a good idea, so, stop! stop! stop!:

<!-- loop A-G -->
<div hi-for="(ch, N) in val('ABCDEFG')">
    {{N+1}}:{{ch}}
</div>

Usage - import other templates

If you have other templates, you can use require tag to import them, such as:

<require path="./../lib/header.html"/>

Attentions

  • A html tag only has a condition property ( one of hi-if、hi-else、hi-show、hi-hide)
  • If you use hi-for and hi-if (or other condition property), hi-for will be done before hi-if
  • require tag must be closed (<require path="..." /> or <require path="..."></require>”)