/zappa

A tiny javascript only templating library for the browser

Primary LanguageJavaScriptMIT LicenseMIT

Zappa Zappa

Zappa is a tiny javascript only templating library for the browser. Instead of writing a mix of HTML and Javascript/Angular Expressions, write only javascript !

Zappa uses actual HTMLElements internally. You can directly use them and avoid the parsing step of string based template systems. The generated HTML is always valid.

Zappa is javascript only: no pseudo-language to learn or special delimiters to use, only javascript code.

Getting Started

Installation

bower install zappa

Overview

var context = {
    name: 'Zappa',
    things: ['very', 'much', 'easy']
};

z('body')
    .elements([
        z.h1().text('This is ' + context.name + ' !'),
        z.section({class: 'content'})
            .elements([
                z.p().text('It\'s easy to write a zappa template.'),
                z.ul()
                    .elements(
                        context.things.map(function (item) {
                            return z.li().text(item); 
                        })
                    )
            ])
    ]);

will append to <body>:

<h1>This is Zappa !</h1>
<section class="content">
    <p>It's easy to write a zappa template.</p>
    <ul>
        <li>very</li>
        <li>much</li>
        <li>easy</li>
    </ul>
</section>

Zappa's functions

There is a function for every HTML5 tag:

z.div();
z.span();
z.ul();
z.form();
...

If you miss one or you want to use web components, you can use element:

z.element('newtag');

will generate

<newtag></newtag>

To add text inside an element, use text:

z.div().text('this text is in the div.');

will generate

<div>this text is in the div</div>

Root expression

You can call any element function (div, span, etc.) directly on z:
z.div();

will generate a lone div:

<div></div>
You can wrap an element from the DOM:
z(document.body)
    .div().text('this is appended to the body');

Any subsequent element function will append the generated HTML to the wrapped element:

<body>
    <div>this is appended to the body</div> 
</body>
You can wrap the result of a query:
z('.container')
    .div().text('this is appended to the .container');

Any subsequent element function will append the generated HTML to the wrapped element found by the query:

<div class="container">
    <div>this is appended to the .container</div> 
</div>

Attributes

To add attributes to an element, simply pass an object to the function:

z.form({
    'class': 'container',
    'name': 'aForm',
    'action': '/gothere'
});

will generate

<form class="container" name="aForm" action="/gothere">
</form>
You can use functions instead of attributes values:
z.div({
    class: function () {
        if (document.documentElement.clientWidth < 768) {
           return 'mobile';
        } else {
           return 'desktop';
        }
    }
});

will generate:

<div class="desktop"></div>

or if you're on a tiny screen:

<div class="mobile"></div>

Multiple children

To append several elements to the same root, use elements:

z.ul().elements([
    z.li().text('one'),
    z.li().text('two'),
    z.li().text('three')
]);

will generate:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
You can use a function instead of elements array argument:
var things = ['one', 'two', 'three']

z.ul().elements(function () {
    return things.map(function (item) {
        return z.span().text(item + ' ' + item);
    });
});

will generate:

<ul>
    <li>one one</li>
    <li>two two</li>
    <li>three three</li>
</ul>

Get the result

The preferred way to use zappa's result is value which returns the HTMLElement generated:

z.div().text('get me !').value();

will return the root HTMLElement of the generated HTML.

But you can still work with strings, if you are required to, with html:

z.div().text('get me !').html();

will return the outerHTML of the generated HTML.

License

This library is free software; you can redistribute it and/or modify it under the terms of the MIT license. See LICENSE for details.