###### This is released software. Please log issues found.

microdata-template v2.2.3

An implementation of HTML template by way of the microdata mechanism.

$3

This JavaScript module should simplify adding dynamic content to HTML documents while staying true to the recommendations of web standards. There are no dependencies here except the JavaScript ECMA5 standard which enjoys nearly universal support in modern browsers. Also, since the HTML recommendations for integral technologies such as template and microdata are variably implemented by modern browsers, this module serves as a polyfill to assure reliable results. Best of all, this methodology encourages the writing of low-dependency JavaScript and perfectly valid HTML — even within fully-functional templated markup.

*

$3

1: In the HTML document, simply load the module and instantiate when ready:
``html


`

2: Write some HTML with a template element (any node designated with both the hidden and itemscope attributes):
`html

`

3: In JavaScript, create a corresponding set of data and then render it (note that the designated element can be an outer scope):
`javascript
var data = [{
"Name": "Home",
"Url": "/home"
}, {
"Name": "About",
"Url": "/about"
}];

var templater = window.MicrodataTemplate.init();
templater.render(document.getElementById("example"), data);
`

4: The resulting HTML will look like this (the template source persists for future use but remains hidden):
`html

`

Note: The example above is simplified for clarity, but more compliant microdata could look like this:
`html

`

*

$3

This module is organized to be attached to an HTML document as a simple external script (see: Simple Usage), but also in a project governed by Asynchronous Module Definition (AMD) with a library such as RequireJS, or an ES6-compliant project bundled by a library such as Webpack. The expectations are the same, but the syntax used to load, instantiate, and then address the module may be slightly different depending on circumstance.

Old-fashioned AMD (RequireJS) Implementation:
`javascript
require.config({
paths: {
text: "./node_modules/requirejs-text/text",
json: "./node_modules/requirejs-json/json",
}
});
define(
[
"./path/to/microdata-template.js",
"json!./path/to/collection.json"
],
function(templater, collection) {

var render = function(rootElement) {
var templateElement = rootElement.querySelector("TR[itemscope]");
templater.render(templateElement, collection);
}
});
`
New-fangled ES6 Module Implementation:
`javascript
import templater from "./path/to/microdata-template.js";
import collection from "./path/to/data/collection.json";

class Example {

render(rootElement=document) {
let templateElement = rootElement.querySelector("TR[itemscope]");
templater.render(templateElement, collection);
};
}

export default Example;
`

*

$3

When displaying information in an HTML page, it sometimes makes sense for a script to loop over a set of data to extract its values and embed them into a repeatable pattern of markup. This sort of routine is what can easily populate the many rows and columns of a complex of data, but is also convenient for rendering more pedestrian page elements like and lists. Of course, this is nothing new and many JavaScript frameworks and libraries provide for exactly this sort of routine as core to their technology, but standard HTML provides for this as well with the