[jQuery] [PLUGIN] Templater
Hi guys,
I have just committed a new plugin to the trunk. It's a simple templater that allows you to create "templates" that get populated via JSON objects. Some examples:
<span style="font-family: courier new,monospace;">
var tmp = $.makeTemplate("My name is {{foo}} and your name is {{bar}}");</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">tmp({foo: "Yehuda", bar: "jQuery"}) #=> "My name is Yehuda and your name is jQuery"
</span><br style="font-family: courier new,monospace;">
It also works with global functions and objects:
<span style="font-family: courier new,monospace;">var tmp = $.makeTemplate("The number being passed in is {{number}} and its integer value is {{parseInt(number)}}");
</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">tmp({number: 17.6}) #=> "The number being passed in is 17.6 and its integer value is 17"
</span>In typical jQuery style, you can make it work on elements too:
<span style="font-family: courier new,monospace;"><div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'></div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">$("#testMe").updateTemplate({first: "Yehuda", last: "Katz", number: 17});</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">Result: <div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'>Yehuda Katz 4</div></span><br style="font-family: courier new,monospace;">
<br clear="all">You can also load in the contents via a new Ajax request:
<span style="font-family: courier new,monospace;"><div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'></div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$("#testMe").loadTemplate("test.json");</span><br style="font-family: courier new,monospace;">
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">Result: <div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'>Yehuda Katz 4</div>
</span>
assuming, of course, that test.json contains the JSON object passed in to updateTemplate above.
You can check out the plugin at <a href="http://jqueryjs.googlecode.com/svn/trunk/plugins/templating/">
http://jqueryjs.googlecode.com/svn/trunk/plugins/templating/</a>
It already has a few unit tests, which serve as a simple demo for how it works.
--
Yehuda Katz
Web Developer | Procore Technologies
(ph) 718.877.1325