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.
bower install zappavar 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>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>z.div();will generate a lone div:
<div></div>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>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>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>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>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>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>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.
This library is free software; you can redistribute it and/or modify it under the terms of the MIT license. See LICENSE for details.