Each DOMtempl template is a valid HTML document.

Elements might have special attributes, that control their templating behavior:

    <a data-COMMAND="VARref"></a>
 

Where VARref points to a variable with actual data, and COMMAND might be one of the following:

data-* attributes

DOMtempl reserves the following HTML5 data attributes:

data-each

The element will be repeated multiple times; the specified variable will be treated as an array and iterated over.

data-when

The element will/will not be rendered according to truthness of specified variable.

data-var

Contents of the element will be replaced with specified variable.

data-attr-NAME

Contents of the NAME attribute will be replaced with specified variable.

data-same

The element is part of the same data-each group as the specified variable is.

data-from

Selects variable scope for children elements.

Note, that data-each and data-when change the scope for all children elements.

VARref

VARref is a string that can describe relative variable position in a JSON-like data structure. It is a bit similar to XPath, although magnitudes simpler (it can't filter or search or group or map or reduce).

Path elements are allowed to contain any characters, except ., / and *.

Whitespace in path elements is not recommended, but allowed.

The . and / symbols are used for concatenating path elements.

For direct descendants of a variable, . is used.

"person": {
    "name": "Barry Allen",
    "age": 25,
}
 

person.name = "Barry Allen"
person.age = 25
 

For all possible children (when iterating over an array), / should be used instead.

"persons": [
    { "name": "John Doe", "age": 25 },
    { "name": "Jack Smith", "age": 32 },
]
 

persons/name = "John Doe", "Jack Smith"
persons/age = 25, 32
 

All VARrefs are relative to their parent elements, unless they start with /.

Accessing current iterator value could be done by appending / to the end.

"fruit": [ "apple", "orange", "banana" ]
"dict": {
    speed: "high",
    voltage: "low"
}
 

fruit/ = "apple", "orange", "banana"
dict/ = "high", "low"
 

Accessing current iterator key could be done by appending the * asterix symbol to the end of the VARref.

"fruit": [ "apple", "orange", "banana" ]
"dict": {
    speed: "high",
    voltage: "low"
}
 

fruit/* = 0, 1, 2
dict/* = "speed", "voltage"
 

Compare to JSONpath:

 //sample data:
    "foo" : { "bar" : "value" },
    "fruit" : [ "apple", "orange", "banana" ],
    "book" : [
            { "author" : "J.K. Rowling", "title" : "Harry Potter" },
            { "author" : "P.K. Dick", "title" : "Minority Report" }
        ]
 

JSONpath	VARref	Gives you
['foo']	foo	{ "bar": "value" }
['foo']['bar']	foo.bar	"value"
['fruit'][0]	fruit.0	"apple"
['fruit'][*]	fruit/	[ "apple", "orange", "banana" ]
['book'][*]['author']	book/author	[ "J.K. Rowling", "P.K. Dick" ]
	book/*	[ "author", "title" ]

Scope

By default, all VARrefs are relative to the closest parent element with a data-when, data-each or data-from attributes. Here

    <div data-when="foo">
        <span data-var="bar"></span>
    </div>
 

SPAN element's data-var points to foo.bar variable.

It only happens for child elements, so to access nested variable in the same element, you still have to use current scope:

    <div data-when="foo" data-var="foo.bar"></div>
 

To break free of deep nested scope, '/' can be used:

    <div data-when="foo">
        <span data-var="bar"></span>
        <p data-var="/moo"></p>
    </div>
 

P element will reference "moo" and not "foo.moo"

Scope can also be changed without any other actions by using data-from attribute:

    <div data-from="person.0">
        <span data-var="name"></span>
    </div>