back to Overview

.ht()

Replaces the content of the list elements with the HTML generated using the given template.
Complete distribution only, not available in stand-alone modules.

Syntax Variants

list.ht(templateString, object...)
list.ht(templateFunction, object...)
list.ht(idSelector, object...)

Parameters

templateString
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.
templateFunction
instead of a HTML template, ht() can also use a template function, e.g. one created by template(). It will be invoked with the object as only argument.
idSelector
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 current list

Description

Replaces the content of the list elements with the HTML generated using the given template. The template uses template() syntax and HTML-escaped its output using escapeHtml().

Example

When you have a HTML snippet like this: 

<div id="price"></div>
Then you can format the price value like this: 
var price = 14.9;
$('#price').ht('<b>${{::0.00}}</b>', price);
Results in: 
<div id="price"><b>$14.90</b></div>

Example

Render a list of names: 

var names = [ {first: 'James', last: 'Sullivan'},
              {first: 'Michael', last: 'Wazowski'} ];
$('#list').ht('<h2>{{listName}}</h2>'+
              '<ul>{{each n: names}}<li>{{n.first}} {{n.last}}</li>{{/each}}</ul>',
              {listName: 'Guys', names: names});
The code creates this: 
<h2>Guys</h2>
<ul><li>James Sullivan<li><li>Michael Wazowski</li></ul>

Example

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').ht('#myTimeTpl', new Date());

See also..

  • HTML() creates only the nodes and can be used with add() and other methods to add the nodes to the DOM, giving you more flexibility than ht().

Comments

comments powered by Disqus

back to Overview

Functions