I’ve been looking at different libraries which enable client side templates with JavaScript.  Client side templates allow applications to have more flexible front end interfaces, and may be especially useful for people looking to use more JavaScript Remoting and have less reliance on tags like repeat.

The first library I started to tinker with was jQote2.  jQote2′s main goal appears to be as fast as possible, and the syntax of the templates should be very familiar to anyone who was worked with server-side scripting languages like ASP or PHP for such things.  jQote2 works seamlessly with jQuery as a plugin, so it’s easy to add the templating logic into your document.  Here’s an example I have up on a gist:

<apex:page Controller="DataController" showHeader="false" standardStylesheets="false">
<apex:includeScript value="{!URLFOR($Resource.HTML5Util, 'jquery.min.js')}" />
<apex:includeScript value="{!$Resource.jQote2}"/>	

<script type="text/javascript">
j$ = jQuery.noConflict();
j$(document).ready(
	function() {
		DataController.getRecords(function(result, event) {
			j$('#contactList').jqoteapp('#contacts_tmpl', result);
		});
	}
);
</script>
<ul id="contactList">
	<script type="text/x-jqote-template" id="contacts_tmpl">
	 <li>Contact: <%= this.Name %>, <%= this.Id %></li>
	</script>
</ul>

</apex:page>

Pretty straight forward.  I’m adding in jQuery through an existing HTML5 resource I’ve got on the instance, and then the jQote2 library itself.  jQote2 then adds in the functions to render the template portion.  ”jqoteapp” means “jqote append”, as in append the results of the template (in this case the script area with the “contacts_tmpl” id to the DOM object referenced by jQuery (in this case, the unordered list).

The “<%= =%>” tags within the jQote2 template provides our dynamic areas, in this reading the Name and Id from a Contact returned from a JavaScript Remoting call (which just does a SOQL call, returns the array).  Since the data is in a list, jQote2 will iterate through the results, giving us our list of contact information.

However, if we wanted to use a little JavaScript for logic within our template, we just use “<% %>” instead.  So if you wanted to call out John Doe in particular:

<script type="text/x-jqote-template" id="contacts_tmpl">
	<% if ( this.Name == 'John Doe' ) { %>
	  <li><B>Contact: <%= this.Name %>!!!?!?!?!</B>, <%= this.Id %></li>
	<% } else { %>
	  <li>Contact: <%= this.Name %>, <%= this.Id %></li>
	<% } %>
</script>

I’ve set this page up so that the HTML reads as someone might normally parse an HTML file, but the script templates are up to you to create and place as you need – even if you need to load them separately, though I’m not sure if the latter defeats any of the cache system jQote2 uses for speed.  Any way you slice it, though, it offers a great tool for the user interface toolkit.

tagged , , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • http://blog.superpat.com/ Pat Patterson

    Wow – that jQote2 looks so much like a typo – what happened to the ‘u’??? ;-)

  • http://twitter.com/joshbirk Josh Birk

    I know, it took a quite a bit of cognitive dissonance to keep writing it that way :) I’m pronouncing it as if it had a u too…

  • http://twitter.com/joeloverton joel overton

    Apparently it’s pronounced “chakotay”