back to Overview


Creates a list of HTML nodes from the given HTML template.
Web module only.

Syntax Variants

HTML(templateString, object...)
HTML(templateFunction, object...)
HTML(idSelector, object...)


the template using template() syntax. Please note, because this is a template, you should avoid creating the template itself dynamically, as compiling templates is expensive and Minified will cache only a limited number of templates. Exception: If the template string does not use any template functionality (no {{}}), it does not need to be compiled and won't be cached. The template will use escapeHtml() as escape function, so all template substitutions will be HTML-escaped, unless you use triple curly-braces.
instead of a HTML template HTML() also accepts a template function, e.g. one created by template(). It will be invoked with the object as only argument.
if you pass an ID CSS selector in the form "#myScript", Minified will recognize this and use the content of the specified <script> element as template. This allows you to put your template into a <script> tag with a non-JavaScript type (see example). Any string that starts with '#' and does not contain any spaces is used as selector.
object (optional)
one or more objects to pass to the template. If object is not set, the template is called with undefined as object. If exactly one object is given, it is passed directly to the template. If you specify more than one object, they are merged.
(return value)
the list containing the new HTML nodes


Creates a list of HTML nodes from the given HTML template. The list is compatible with add(), fill() and related methods. The template uses the template() syntax with escapeHtml() escaping for values.

Please note that the function HTML will not be automatically exported by Minified. You should always import it using the recommended import statement:

var MINI = require('minified'), $ = MINI.$, $$ = MINI.$$, EE = MINI.EE, HTML = MINI.HTML;


Creating a HTML element showing a number:

<div id="price">-</div>
Then the price can be set like this:
var price = 14.9;
$('#price').fill(HTML('<b>${{::0.99}}</b>', price));
Results in:
<div id="price"><b>$14.90</b></div>


Adding elements to an existing list:

var names = [ {first: 'James', last: 'Sullivan'},
              {first: 'Michael', last: 'Wazowski'} ];
$('#list').add(HTML('{{each}}<li>{{this.first}} {{this.last}}</li>{{/each}}', names);
The code adds this to #list:
<li>James Sullivan<li><li>Michael Wazowski</li>


You can store templates in <script> tags. First you need to create a <script> tag with a type not supported by the browser and put your template in there, like this:

<script id="myTimeTpl" type="minified-template">The time is {{HH:mm:ss}}.</script>
Then you can specify the tag's id directly to access it:
$('#timeDisplay').fill(HTML('#myTimeTpl', new Date()));

See also..

  • ht() is a shortcut for fill(HTML()).
  • EE() is a different way of creating HTML nodes.


comments powered by Disqus

back to Overview