tagel template engine
Creates html pages using patrials (import) and applies a context (binding).
Elements and attributes
import
imports content of template at RELATIVE_PATH and rewrites paths
<link rel="import" href="RELATIVE_PATH">lang
reads lang from html tag and removes all elements with a lang attribute that doesn't match
<html lang="en">
...
<div lang="fr">...</div> <!-- will be removed -->tg-env
removes elements having tg-env attribute that doesn's match process.env.NODE_ENV
<div tg-env="development"></div>tg-if
if tg-if attribute value is falsy, it removes the element
<div tg-if="something_falsy">
...
</div>tg-for
attribute value must be an array. It repeats the element (and subtree) and binds values based on array item
<div tg-for="this.items">
<div tg-bind="this.property1"></div>
</div>tg-text
set the element's content to the evaluated value (textContent)
<div tg-text="this.textProperty"></div>tg-html
set the element's inner html tree to the evaluated value (innerHTML)
<div tg-html="this.htmlProperty"></div>tg-bind
replaces element with the evaluated value
<div tg-bind="this.property"></div>Attribute Binding
to bind a value to an attribute, prefix attribute name with tg:
<a tg:href="this.imageUrl">...</a>