Noisy Pneumatic Mnemonic

    barbiche

    3.0.11 • Public • Published

    Barbiche - Template engine for DOM & JavaScript

    Barbiche is a logic-full template engine for browser environment. It has been designed to give you complete control over the data you want to merge into an HTML fragment. Once minified and gzipped, Barbiche size is 11KB.

    Documentation and interactive examples can be found here.

    Features

    Barbiche supports:

    • text and HTML insertion
    • conditions (if and optional else)
    • aliases
    • loops
    • flexible subtemplate imports
    • attribute setting
    • class setting

    Barbiche has a complete test suite that can be run in your browser.

    Sample

    We ask Barbiche to merge some data into an HTML template:

    <template id="test">
        <div bb-alias="items[1].name: 'name'" bb-class="customClass">
            <div>{{name}}</div>
            <ul bb-attr="my_replace(attrValue): 'attr-name'">
                <template bb-repeat="items: 'item'">
                    <li bb-if="item.show" bb-class="[item.species || 'unknown', (_item_ == 0): 'first']">
                        {{item.name}} (index: {{_item_}})
                    </li>
                </template>
            </ul>
            <span>{{item.join(', ').toUpperCase()}}</span>
            {{{some_html}}}
        </div>
    </template>
    var barbiche = Barbiche();
    var frag = barbiche('test').merge({
        customClass: "my-class",
        "items": [
            {species: "hen", name: "Elsa", show: true},
            {species: "cat", name: "Jacynthe", show: false},
            {species: null, name: "Zaza", show: true}
        ],
        item: ["hen", "cat", "dog", "spider"],
        some_html: "<div><p>This is...</p><p>...some HTML.</p></div>",
        my_replace: function(str) {return str.replace(/o/g, "O");},
        attrValue: "lunchroom"
    });

    The returned document fragment can then be inserted anywhere you want. It contains:

    <div class="my-class">
        <div>Jacynthe</div>
        <ul attr-name="lunchrOOm">
            <li class="hen first">Elsa (index: 0)</li>
            <li class="unknown">Zaza (index: 2)</li>
        </ul>
        <span>HEN, CAT, DOG, SPIDER</span>
        <div><p>This is...</p><p>...some HTML.</p></div>
    </div>

    Browser support

    Barbiche requires support of <template> element and basic support of element.classList API. Here is the support table:

    Native (v2 & v3) Polyfilled (v2) Polyfilled (v3)
    Chrome ≥26 ≥15 ≥26
    Firefox ≥22 ≥22 ≥22
    IE/Edge No support ≥9 ≥11
    Opera ≥15 ≥11.6 ≥15
    Safari ≥9 ≥6.2 ≥6.2

    Polyfills, once minified and gzipped, weight an additionnal 2KB.

    Install

    npm i barbiche

    DownloadsWeekly Downloads

    0

    Version

    3.0.11

    License

    MIT

    Last publish

    Collaborators

    • manubb