This repo contains examples of html tables and lists rendered with several templating systems. The lists and tables are populated with data from JavaScript objects in data.js.
This is part of a comparison of some DOM based templating systems; background motivations, together with links to the templating systems' project pages, can be found here.
Distal is a Template Attribute Language (TAL). Unlike Pure, Transparency and Weld, Distal uses its own syntax to add attributes to HTML.
To bind data, mark HTML with TAL attributes and execute the distal function with two arguments -- the HTML element, and the JSON data. See examples of a list and a table.
You can use the data-qif='condition' attribute to add display: none to the nodes for which condition is false. When iterating over a collection with data-qrepeat, you can access the current index location by using "#" as the property name. Formatters are JavaScript functions that allow you to manipulate JSON data before adding it to a node. See examples of data-qif and formatters here.
Apparently Distal is slower than other options, because Distal works by modifying the existing DOM rather than replacing and regenerating it. (See discussion in this issue.)
JSTAL is another Template Attribute Language (it seems(?) to be similar to Distal, but less maintained/documented).
Pure maps JSON data to HTML classes. By default, the value of a JavaScript/JSON object is mapped to the HTML class with the name of its key. This default behavior can be altered by using directives, JavaScript objects that determine how JSON data is to bound to CSS selectors. The keys of a directive are CSS selectors, and the values are strings, objects or functions.
See examples of a directive for a list and for a table.
You can use directives to add CSS selectors to nodes; here is an example of a directive where different classes are added to different items in a collection.
By default, Transparency binds JavaScript objects to a DOM element by id, class, name attribute and data-bind attribute. And as with Pure, this default behavior can be altered with directives. In Transparency, directives are JavaScript objects whose keys are the attributes of the target elements, and whose values map html or text attributes of the node selected by the key to JavaScript functions.
See a directive for a list, and for a table. Here is an example of a directive that treats elements of a collection differently depending on their position in the collection.
Here is an example (of a list) rendered with transparency in Node.js.