Template
Convert Array of JSON objects into a HTML structure, a new Array of JSON objects or a plain string, using a template.
IE 6-9 does not support table.innerHTML, so temlating with tables, require the passed template to be string as it won't work with a
Functions
Util.template
Definition
- Name
- Util.template
- Syntax
- Nodelist | Array | JSON = Util.template( Node|String|JSON template , JSON json [, JSON _options ] );
Description
If HTML (node or string) is passed as template, it creates HTML nodes from json based on template.
If JSON (Object or string) is passed as template, it creates new Array of JSON Objects from json based on template.
If plain String is passed as template, it creates a combined string, with the values from json.
If json contains values of type Object, Number, Boolean or null, these maintain the same type only when template is also JSON. If template is HTML, HTML string or plain string, these types will naturally be returned as a text-representation. In this case null becomes an emptry string.
Parameters
- template
-
Node HTML node to be used as template.
- template
-
StringText, HTML or JSON string to be used as template.
- template
-
JSON JSON object to be used as template.
- json
-
JSON JSON object or Array of JSON objects to use as values.
- _options
-
JSON Optional options for parsing
Options
Return values
ChildNodes|Array|String
If HTML is passed as template it returns list of created nodes as ChildNodes reference or Array of nodes if the append option is used to append nodes automatically.
If JSON is passed as template it returns an Array of JSON Objects.
If String is passed as template, a combined String is returned.
If json contains values of type Object, Number, Boolean or null, these maintain the same type only when template is also JSON. If template is HTML, HTML string or plain string, these types will naturally be returned as a text-representation. In this case null becomes an emptry string.
Examples
HTML templating, Simplest usage
<ul>
<li class="template">
<h3>{name}</h3>
<p>{description}</p>
<a href="{url}">link</a>
</li>
</ul>
<script>
var data = [
{
"name":"Manipulator",
"description":"JavaScript framework",
"url":"http://manipulator.parentnode.dk"
},
{
"name":"Detector",
"description":"Device detection"
"url":"http://detector.parentnode.dk"
}
];
var template = u.qs("li.template");
var nodes = u.template(template, data);
</script>
Returns nodeList with 2 html nodes, shown below:
<li>
<h3>Manipulator</h3>
<p>JavaScript framework</p>
<a href="http://manipulator.parentnode.dk">link</a>
</li>
<li>
<h3>Detector</h3>
<p>Device detection</p>
<a href="http://detector.parentnode.dk">link</a>
</li>
With automatic appending
<ul>
<li class="template">
<h3>{name}</h3>
<p>{description}</p>
<a href="{url}">link</a>
</li>
</ul>
<script>
var data = [
{
"name":"Manipulator",
"description":"JavaScript framework",
"url":"http://manipulator.parentnode.dk"
},
{
"name":"Detector",
"description":"Device detection"
"url":"http://detector.parentnode.dk"
}
];
var list = u.qs("ul");
var template = u.qs("li.template");
var nodes = u.template(template, data, {"append":list});
</script>
Adds two new nodes to the UL, making the ul look like:
<ul>
<li class="template">
<h3>{name}</h3>
<p>{description}</p>
<a href="{url}">link</a>
</li>
<li>
<h3>Manipulator</h3>
<p>JavaScript framework</p>
<a href="http://manipulator.parentnode.dk">link</a>
</li>
<li>
<h3>Detector</h3>
<p>Device detection</p>
<a href="http://detector.parentnode.dk">link</a>
</li>
</ul>
JSON conversion
var template = {
"name":"{res1}",
"description":"{res2}",
"url":"{res3}"
"saved":"{res4}"
};
var data = [
{
"res1":"Manipulator",
"res2":"JavaScript framework",
"res3":"http://manipulator.parentnode.dk"
"res4":true,
"meta":{
"key":"{1231-BFED-12312-21231}",
"signature":"Xew-12345"
},
},
{
"res1":"Detector",
"res2":"Device detection"
"res3":"http://detector.parentnode.dk"
"res4":false,
"meta":{
"key":"{1231-BFED-12312-21231}",
"signature":"Xew-12345"
},
}
];
var new_json = u.template(template, data);
Returns lean JSON object with custom keys:
[
{
"name":"Manipulator",
"description":"JavaScript framework",
"url":"http://manipulator.parentnode.dk",
"saved":true
},
{
"name":"Detector",
"description":"Device detection"
"url":"http://detector.parentnode.dk",
"saved":false
}
];
Dependencies
JavaScript
- switch ... case
- document.createElement
- Node.cloneNode
- Node.appendChild
- decodeURIComponent
- String.replace
- String.toLowerCase
- Array.push
Manipulator
- None
Files
Main file
- u-template.js
Segment support files
- none
Segment dependencies
- desktop_edge
- u-template.js
- desktop_ie11
- u-template.js
- desktop
- u-template.js
- desktop_ie10
- u-template.js
- desktop_ie9
- u-template.js
- desktop_light
- u-template.js
- tablet
- u-template.js
- tablet_light
- u-template.js
- smartphone
- u-template.js
- mobile
- not tested
- mobile_light
- not supported
- tv
- u-template.js
- seo
- not supported