Search jQuery

jQuery Forum

[jQuery] [PLUGIN] Templater

in Using jQuery • 15 years ago

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

Replies(10)

seventoes

Re: [jQuery] [PLUGIN] Templater

15 years ago

Sweet, i needed something like this about a week ago, ended up writing my own :-/
Cool anyways! nice job!
<div><span class="gmail_quote">On 8/18/07, <b class="gmail_sendername">Yehuda Katz</b> <<a href="mailto:wycats@gmail.com">
wycats@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">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/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
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.
<span class="sg">
--
Yehuda Katz
Web Developer | Procore Technologies
(ph) 718.877.1325
</span></blockquote></div>

littlecoo..

Re: [jQuery] [PLUGIN] Templater

15 years ago

Pretty cool Yehuda, I'll have to give it a shot so I can give ya some feedback.
~Sean

wycats

Re: [jQuery] [PLUGIN] Templater

15 years ago

I've modified the plugin slightly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Templating</title>
    <script src="../../jquery/dist/jquery.min.js"></script>
    <script src="jquery.templating.js"></script>
    <script>
      jQuery(function ($) {
          $("a.updateTemplate").click(function() {
            $(this.rel).loadTemplate(
this.href);
            return false;
          });
          $("._template").templatize();
      });
    </script>
</head>
<body>
    <div class="_template" id="myTemplate">
      <![CDATA[
        <{{tag}} href="{{href}}">{{first}} {{last}}</{{tag}}>

Bar

        <div>First Name: {{first}}</div>
        <div>Last Name: {{last}}</div>
      ]]>
    </div>
    <a href="foo" rel="#myTemplate" class="updateTemplate">Click</a>
</body>
</html>
Effectively, you stick the template in a CDATA block, and it can then be converted in the same way I described earlier. Cool shit, huh?
<div><span class="gmail_quote">On 8/18/07, <b class="gmail_sendername">Sean Catchpole</b> <<a href="mailto:littlecooldude@gmail.com">littlecooldude@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Pretty cool Yehuda, I'll have to give it a shot so I can give ya some feedback.
<span class="sg">
~Sean
</span></blockquote></div>
<br clear="all">
--
Yehuda Katz
Web Developer | Procore Technologies
(ph)  718.877.1325

sant9442

Re: [jQuery] [PLUGIN] Templater

15 years ago

On Aug 19, 2:37 am, "Yehuda Katz" <wyc...@gmail.com>

wycats

Re: [jQuery] [PLUGIN] Templater

15 years ago

It would be trivial to change the template field syntax. In the next
revision of this thing, I'll probably just make it configurable.
-- Yehuda

sant9442

Re: [jQuery] [PLUGIN] Templater

15 years ago

Hi Yehuda,
I grabbed your plugged and tried it out. I think I can used it with
some enhancements I am going to suggest <g>.
First let me tell ya what I found.
I got your simple first/last tag demo to work, but using that as a
model for a test page I have already been working on for data/html
binding, but I can't get it to work. By that, I mean, nothing showed
up:
I started with this:
<body>
<div class="_template" id="myTemplate">
<![CDATA[
<table>
<tr><td>Session #:</td><td>{{cid}}</td></tr>
<tr><td>Time:</td><td>{{time}}</td></tr>
<tr><td>Total Users:</td><td>{{TotalUsers}}</td></tr>
<tr><td>Total Calls:</td><td>{{TotalCalls}}</td></tr>
<tr><td>Total Msgs:</td><td>{{TotalMsgs}}</td></tr>
<tr><td>Total Files:</td><td>{{TotalFiles}}</td></tr>
]]>
</div>
<a href="/code/jqupdate.wcx?cmd=status" rel="#myTemplate"
class="updateTemplate">Click</a>
</body>
The jqupdate.wcx is a server-side pcode (compiled) applet that runs on
our server. I have this WCX returning JSON formatted structures.
cmd=status returns something like this:
{Time:'01:06:46',Cid:'339',TotalMsgs:'33424',TotalFiles:'1179',TotalCalls:'17506',TotalUsers:'475'}
and the call was made, but it appeared like the template is not
processed
After exploring everything I can think of using plain vanilla divide
and conquer techniques (meaning trying to get it down to match your
demo), I finally found that the tags are case sensitive.
Changing the WCX and {{fields}} to lower case and now it worked! The
template was processed.!
I like it!
Suggestions:
I passing long time engineering tips based on our own system so
consider these very practical. :-)
1) Case Insensitive Tag Support
Case sensitivity issues are for code, language or tools progammers,
not higher level end users or application developers. :-)
For something like this, application developers are going to use
capitalize tags for readability, "TotalFiles" as oppose to"totalfiles"
should not make a difference or be a requirement.
2) Always process the template
Even if the tags are not found or error display the template. This
will help developers debug their templates, i.e, a typo in a
{{field}}, etc. You might want to offer an option to return blank
for tags not found instead of just displaying the tag. The reason is
straight found. Some tags are blank or empty strings, so to reduce
server template memory, some times an application may not save blank
fields. For JSON, the applet may not wish to pass it along. I
suggest the latter should be default (blank for tags not found) and
then offer a "debug" flag to show tags that are not found to help
debug templates.
3) Add Extended Syntax:
Consider adding an extended JSON syntax support . This will give your
pluging flexibility and growth potential. I provided some examples
below how the extended syntax can come into play.
4) Consider adding some common Ad-Hoc (JSON) Table Reporting
Templates.
Many people may want to create common reporting display output for a
JSON "result set", like tables like I have above.
Your plugin would automatically create it based on the number of
fields in the JSON using the tag name as the field name.
In practice, this is highly desirable especially in the corporate
setting since most of time that it all you want as they do with
standard ad-hoc report generators. It would be one less thing that
has to be created in the HTML.
Now, if you only did it at the basic level with simple JSON output,
that would be great 80% of the time, but you can also extend it so
that the JSON data can help define some basic reporting attributes.
(Side Note: I clearly understand the philosophical debates regarding
separatring data vs rendering. In addition, I'm still new to JSON
constructs, so I am not an expert yet in easily transformation data
into JSON. Seems easy, but I'm still learning. So use this below to
illustrate only)
Basic Minimum Syntax:
{tag:value.....}
Extended Syntax:
{
Settings: (title, direction, [field_names], {css} }
Data: {tag:value...} or [ {tag:value...}, {tag:value...}....]
}
Example: Single column table sing the JSON tags as cell name.
{Time:'01:06:46',Cid:'339',TotalMsgs:'33424',TotalFiles:'1179',TotalCalls:'17506',TotalUsers:'475'}
Example: Same as above using extended syntax with title.
{
Settings: {Title:"Server Status", Direction: Single}
Data:
{Time:'01:06:46',Cid:'339',TotalMsgs:'33424',TotalFiles:'1179',TotalCalls:'17506',TotalUsers:'475'}
}
Example: Multple column table
{
Settings: {Title:"List of files", Fields: ['File Name', File Size',
'Upload date']}
Data:
[
{Name:"xxxx.zip", size: '12312', date: '2008/08/10"},
{Name:"zzzzzzip", size: '32423423', date: '2008/08/10"},
{Name:"yyyyy.zip", size: '14543543', date: '2008/08/18"}
]
}
5) Add some JSON flow controls
Here we want JSON to "control" AJAX. For example, in my server status
example I want to update every 10 second using a get method.. You can
do this with the extended syntax:
{
Ajax: {Poll: 10; href: "/code/jsupdate?cmd=status", method: 'get''}
Settings: {Title:"Server Status", Direction: Single}
Data:
{Time:'01:06:46',Cid:'339',TotalMsgs:'33424',TotalFiles:'1179',TotalCalls:'17506',TotalUsers:'475'}
}
Thats it for now!
Great Plug-in!! Maybe I can help you make it even Greater! <g>
If you like you can email me directly to discuss it.
--
HLS

sant9442