Tagel NPM | npm.io

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>

syn-html-parser

@infinitebrahmanuniverse/nolb-tag @everything-registry/sub-chunk-2872

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago