v1.0

Dependencies

  • jQuery v1.3.2

Function - template()

Loads HTML templates in the selector into memory from the DOM.
The root element of the selector is treated as the template container. The container may optionally define the "id" HTML attribute, which will act as an option prefix for its templates. Immediate child elements of the container are all considered templates. Each template must specify a unique identifier using the "id" HTML attribute. To maintain HTML/XHTML validity, the identifier may be prefixed with the container's id and an underscore. For example, a container with the id "container" and a template that will be named "template" may specify either simply "template" or "container_template". Duplicate identifiers will be overwritten by the last template in the DOM. Use CSS classes to identify which elements will be injected with data.

Example HTML:
<div id="templateRoot">
    <div id="templateRoot_foo" class="section">
        <h1 class="title"></h1>
        <div class="content"></div>
    </div>
    
    <li id="item"><span class="text"></span></li>
    
    <div>
        This template will not be loaded.
    </div>
</div>

Example jQuery:
$('#templateRoot').template();

Result of example code:
  • A template named "foo", with injection targets "title" and "content".
  • A template named "item", with injection target "text".
  • In browsers that support console.warn(), a warning in the console that a template could not be loaded because it is missing an identifier.

Function - template(templateName, data, addMethod)

Instantiates a template (or templates) and adds them into the DOM using the specified jQuery method.

Attributes:
  • templateName: The name of the template to be used. As described above, a template is named using its id HTML attribute, not including the optional prefix from its container.
  • data: A JSON object or array of JSON objects containing data to be injected into the template(s). The properties of each JSON object should correspond to the CSS classes used to define injection targets in the template. Properties that are not found in the template will obviously not be injected.
  • addMethod (optional): The http://docs.jquery.com/Manipulation that will be used to add the new elements into the DOM. The default is http://docs.jquery.com/Manipulation/append.

Example HTML:
<div id="target"></div>

<div id="templateRoot">
    <div id="templateRoot_foo" class="section">
        <h1 class="title"></h1>
        <div class="content"></div>
    </div>
    
    <li id="item"><span class="text"></span></li>
    
    <div>
        This template will not be loaded.
    </div>
</div>

Example jQuery:
$('#templateRoot').template();

var data = [{ title: 'foo!', content: 'foobar and oyvey!' }, { title: 'bleh!', content: 'i liek stuff lulz'}];
$('#target').template('foo', data);

Result of example code:
  • Templates are initialized as in the previous example.
  • Two instances of the "foo" template are inserted into the element div#target with data from the items defined in the "data" variable.

Last edited Aug 23, 2009 at 4:21 AM by DanielSchaffer, version 3

Comments

softer Sep 12, 2009 at 7:44 PM 
Your example doesn't do anything on FF 3.5.3