jQuery Template Markup Langauge (JTML) vs. jQuery Templates

@Ben,

I'm starting to see server-side templating (CFML) and client-side templating as complementary, much like server-side and client-side data validation. Because JavaScript could be turned off, you can't rely solely on client-side templating or data validation, so you fall back to server-side equivalents.

It's been easy in the past to ignore client-side templating on the grounds that "damn, I have to do it in ColdFusion too, so what's the point?" But Offline Web Apps are changing that. As we plan to make our apps accessible even when the Internet isn't, we still have the problem of repeating chunks of HTML, but no ColdFusion on the client to help us do it.

You favor a tag base approach because of the similarity to ColdFusion. John Resig's original "microtemplating" article took a tag based approach too. He was the one who came up with the idea of using script tags with type="text/html" to define the template. So your preference has good foundation, right back to the very beginnings of JavaScript templating.

Steve, while you make good points, I disagree with you on one point. Falling back to server side templating when javascript is turned off client side. At this point the web is pretty much useless without javascript and I don't think at this point is reasonable to acquiesce to stubborn users. I view disabling javascript much like, disabling cookies. If you don't turn it on then I won't play with you. There is just so much done with js these days there really isn't a good reason to disable it in the browser.

An interesting side-by-side. I've been using the proposed MS template plugin, and it has worked great for me.

Integration with the jQ data linking plug-in (including 2-way) is another benefit of using the official jQ template plug-in.

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

Since I'm doing a lot more javascript these days I've come to like script based syntax more than tag based. Ditto for CF - I prefer to use cfscript where I can.

If JS is disabled (whether you like it or not) will the JS tags shopw up in the page?

For example, would the line:

{{tmpl( $data ) "#phoneTemplate"}}

Show up on the page as literal text if I disabled JS? If so then this could be mighty ugly and mess with SEO.

I literally only just heard about this from your post so please do bare with me on my ignorence!

Nice work, Ben! Many thanks for your continuing explorations.

finally got around to playing with both this example and the nettuts one on the 'official' plugin

i'd say i agree with your general comment that it is a matter of personal preference between the two approaches

have you looked at how the two perform for larger datasets, or is the main bottleneck the data fetching call?

with a bit of time next week i'll try to migrate some messy inline js templates i've inherited to your plugin instead - at least on the dev version :D

Sort of wish I found this a little earlier! I actually created a plugin for jQuery called json2html which is sort of a templating engine for jQuery, however it's based more along the lines of a transform (similar to xsl transforms for xml). The idea is to use a JSON object transform to convert another JSON source data object into HTML.

I've used this in a number of projects and it works extremely well. It is DOM dependent and does include support for event binding etc.. The nice thing about the library is that everything is JSON, pure javascript implementation that creates HTML markup using the DOM.

The drawbacks are as follows:

a) it's limited to creating an unstructured list at the highest level of the DOM produced
b) creating transforms in JSON takes a little while to get used to

The benefits are as follows:

a) very lightweight 3Kb
b) recursive in nature (making it extremely flexible). Including transform 'nesting'
c) completely based on the DOM with appropriate event creation
Here is an example for using JSON2HTML for the client example above

<head>
	<title>jQuery plugin JSON2HTML</title>
 
	<!-- Include core jQuery, jQuery Templates, and JTML. -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><br />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> </p>
 
	<script type="text/javascript" src="http://crystallinetech.com/json2html/jquery.json2html-2.0-min.js"></script> </p>
 
	<script type="text/javascript">
 
		var clients = [
			{
				id: 1,
				name: "Sarah",
				age: 32,
				phone: [ {number:"917-555-1234"}, {number:"212-555-1943"} ]
			},
			{
				id: 2,
				name: "Maggie",
				age: 25,
				phone: [ {number:"917-555-8989"}, {number:"646-555-0001"} ]
			},
			{
				id: 3,
				name: "Emma",
				age: 27,
				phone: [ {number:"212-555-3999"}, {number:"508-555-1492"} ]
			}
		];
 
		var clientTransform = [
			{tag: 'p', children:
				[
					{tag:'a', href:function(obj){return('clients/'+obj.id);}, html:function(obj){return(obj.name + " - Age: " + obj.age);}}
				]
			},
			{tag:'div',children:function(obj){return($.json2html(obj.phone, phoneTransform));}}
		];
 
		var phoneTransform = [
			{tag:'span',html:'.number'}
		];
 
 
	</script>
</head>
<body>
 
	<div id="json2htmlOutput">
		<!-- This will be filled dynamically. -->
	</div>
 
	<!-- Execute template. -->
	<script type="text/javascript">
 
		$( "#json2htmlOutput" ).json2html(clients, clientTransform);
 
	</script>
 
</body>

Source code and examples can be found here

www.json2html.com

Also the following site's include this plug-in

www.new2release.com (heavily dependent on JSON2HTML)

www.projectclimb.com (search functionality)

thanks for your source code and examples. it's really useful.