demo.html

<script src="lib/jquery.js"></script>
<script src="jquery.tmpl.js"></script>
<script>
jQuery(function(){
	var dataObject = {
        name: function() {
			return this.firstName + " " + this.lastName;
		},
    	firstName: "John",
		lastName: "Resig",
        url: "http://ejohn.org/",
		cityJoin: function() {
			return this.cities.join(", ");
		},
    	cities: [
        	"Boston, MA",
        	"San Francisco, CA"
    	]
	};
	
	var arrayOfDataObjects = [ dataObject, dataObject, dataObject ];
	
	var tmpl = '<li>${$i}) <a href="${url}">${name}</a> (${cityJoin})</li>';

    //jQuery.tmpl.debug = true;
    
	$("#sometmpl1")
    	.render( dataObject ) // Returns a LI with all the data filled in
    	.appendTo("ul");

	$("#sometmpl1")
    	.render( arrayOfDataObjects ) // Returns multiple LIs with data filled in
    	.appendTo("ul");

	$("#sometmpl2")
    	.render( arrayOfDataObjects ) // Returns multiple LIs with data filled in
    	.appendTo("ul");
            
	
	// Appends one LI, filled with data, into the UL
	$("ul").append( tmpl, dataObject );

	// Appends multiple LI, filled with data, into the UL
	$("ul").append( tmpl, arrayOfDataObjects );
    
    
    $("#sometmpl3")
        .render( dataObject ) // Returns a LI with all the data filled in
        .appendTo("ul");
        
       
    // renders asyncronously via remote templates (still cached)
    $.render({
        url: 'examples/templates/remote1.html',
        templateData: dataObject, 
        success: function(rendered){
            $('ul').append(rendered);
        }
    });
    
    // renders syncronously via remote templates (still cached)
    $('ul').append( $.render({
        async:false,
        url: 'examples/templates/remote2.html',
        templateData: dataObject
    }) );
    
    $("#sometmpl4")
        .render( dataObject ) // Returns a LI with all the data filled in
        .appendTo("ul");
    
    //directly rendering with a data array returns array of rendered templates
    var list = $.render('<li>${$i}) ${name} </li>', arrayOfDataObjects);
    $(list).appendTo('ul');
});
</script>

<script id="sometmpl1" type="text/html">
	<li>${$i}) <a href="${url}">${name}</a> (${cityJoin})</li>
</script>

<script id="sometmpl2" type="text/html">
    {{comment}}
       This comment is ignored by the templating engine.
       so is the ${foo} following this
    {{/comment}}
	<li>${$i}) <a href="${url}">${name}</a> Cities: {{each(i,city) cities}}${city}{{/each}}</li>
    ${foo}
</script>

<script id="sometmpl3" type="text/html">
    <li>Cities: ${ join(cities," --- ") }</li>
</script>

<script id="sometmpl4" src='examples/templates/remote3.html' type="text/html"> </script>

<script type='text/html' 
        id='sometmpl5'
        src='examples/templates/compile_me.html'></script>
                
<ul></ul>