Bug Tracker

AppendTemplated

By Kurt Mackey

Formats an object (or array of objects) according to the specified template and appends the results to the current jQuery result set

Syntax

The .appendTemplated() function requires two parameters, a snippet of HTML to use as a template, and an object to fill template values with. The object can be an array.

In addition to required parameters, the call takes an options hash which let's you specify a few more things:

  • compiled : true - "compiles" the template down to a javascript function before applying it. This is useful for large result sets.
  • pattern : /#{([a-zA-Z][a-zA-Z0-9]*)}/g - Specifies the regex pattern that indicates a template variable. The default template variable syntax is #{something}.
  • defaultFieldName : 'item' - when the template encounters this field, it will insert the current object's string representation. This is useful when the template set is an array of primitives.
Example

$('#Headlines').appendTemplated('<li class="#{ContainerFileName}"><a href="#{Url}">#{Title}</a></li>', values);

Return Value

jQuery

Tested In

  • IE 5.x, 6.0, 7.0 Beta 2
  • IE 5.x Mac
  • Firefox > 1.0, 2.0
  • Opera 8.54, Opera 9 Beta
  • Safari 2.03

Download

http://mubble.net/jquery/jquery.template.js

Example

Example

Demo

http://mubble.net/jquery/jquery.template.html

(Just a quick suggestion: in the demo have a Clear button to remove the previous test results, 'cos they get appended at the end and it means a long scroll down the page :) )