jquery.expand is an extremely powerful structural templating library. Looking back on when I first started using it, I realize I was only taking advantage of about 20% of its potential. Here are some examples that should help anyone new to jquery.expand get a head start.
Classes
template
<div id="my-template"> <h2 class="name"></h2> <p class="content"></p></div>expand
$("#my-template").expand({ name: "Cooking with Crowley", content: "Step 1, light the grill. Step 2..."})result
<div> <h2 class="name">Cooking with Crowley</h2> <p class="content">Step 1, light the grill. Step 2...</p></div>Nesting
template
<div id="my-template"> <h2 class="name"></h2> <span class="author"> Written by <span class="name"/> </span></div>expand
$("#my-template").expand({ name: "Cooking with Crowley", author: { name: "Shawn Crowley" }})result
<div> <h2 class="name">Cooking with Crowley</h2> <span class="author"> Written by <span class="name">Shawn Crowley</span> </span></div>Selectors
template
<div id="my-template"> <h2 class="name"></h2> <div class="content"> <p class="excerpt"/> </div></div>expand
$("#my-template").expand({ "$h2": "Cooking with Crowley", "$.content p.excerpt": "Step 1, light the grill. Step 2..."})result
<div> <h2 class="name">Cooking with Crowley</h2> <div class="content"> <p class="excerpt">Step 1, light the grill. Step 2...</p> </div></div>Setting Attributes
template
<div id="my-template"> <span class="author"> Written by <a class="name" href=""></a> </span></div>expand
$("#my-template").expand({ name: { "@href": "http://atomicobject.com/pages/Shawn+Crowley" }})result
<div> <span class="author"> Written by <a class="name" href="http://atomicobject.com/pages/Shawn+Crowley"/> </span></div>Setting Properties
template
<div id="my-template"> <input type="checkbox" name="like" /> Like</div>expand
$("#my-template").expand({ "$input[name=like]": { ":checked": true }})result
<div> <input type="checkbox" name="like" checked/> Like</div>Calling Functions
template
<div id="my-template"> <span class="author"></span> <input type="text" name="comment" /></div>expand
$("#my-template").expand({ author: { "addClass()": "awesome" }, "$input[name=comment]": { "val()": "nice post!" }})result
<div> <span class="author awesome"></span> <input type="text" name="comment" value="nice post!" /></div>Removing Elements
template
<div id="my-template"> <span class="author"></span></div>expand
$("#my-template").expand({ author: false })result
<div></div>Arrays
template
<div id="my-template"> <span class="content"></span> <div class="comments"> <div class="comment"></div> </div></div>expand
$("#my-template").expand({ content: "Step 1, light the grill. Step 2...", comments: ["Sounds delicious!", "What next?!?"]})result
<div> <span class="content">Step 1, light the grill. Step 2...</span> <div class="comments"> <div class="comment">Sounds delicious!</div> <div class="comment">What next?!?</div> </div></div>Functions
template
<div id="my-template"> <span class="content"></span> <div class="comments"> <div class="comment"></div> </div></div>expand
var comments = ["Sounds delicious!", "What next?!?"];
// or, if there are no comments// var comments = [];
$("#my-template").expand({ content: "Step 1, light the grill. Step 2...", comments: function(el) { if (comments.length == 0) { return false; // this will remove the comments div } else { return comments; } }})result w/comments
<div> <span class="content">Step 1, light the grill. Step 2...</span> <div class="comments"> <div class="comment">Sounds delicious!</div> <div class="comment">What next?!?</div> </div></div>result w/o comments
<div> <span class="content">Step 1, light the grill. Step 2...</span></div>Nesting and Functions and Arrays, oh my!
template
<div id="my-template"> <span class="content"></span> <div class="comments"> <div class="comment"> <span class="commenter"></span> <div class="body"></div> </div> </div></div>expand
var comments = [ { author: "Dave Crosby", approved: true, text: "Sounds Delicous!" }, { author: "Micah Alles", approved: false, text: "What next?!?" }, { author: "Drew Colthorp", approved: true, text: "Thanks for the info." }];
$("#my-template").expand({ content: "Step 1, light the grill. Step 2...", comments: function(el) { var approvedComments = []; $.each(comments, function(index, comment) { if (comment.approved) { approvedComments.push({ commenter: comment.author, body: comment.text }); } }); if (approvedComments.length == 0) { return false; } else { return approvedComments; } }})result
<div> <span class="content">Step 1, light the grill. Step 2...</span> <div class="comments"> <div class="comment"> <span class="commenter">Dave Crosby</span> <div class="body">Sounds Delicous!</div> </div> <div class="comment"> <span class="commenter">Drew Colthorp</span> <div class="body">Thanks for the info.</div> </div> </div></div>
2 Comments
What’s the value in using a client side templating system? Offline use with local database storage?
Topher – Client side templates can be very useful when the front end is pulling/pushing data to/from a JSON API. By rendering the HTML on the client side you can better decouple the user interface from the server side data processing. And as you mentioned, it is the only way to render HTML if your web application is going to run offline with no access to the web server.
In addition, client side templates are a good way to distribute the processing requirements of web pages to the users’ machines, as opposed to having to do all of the work on the web servers. I attended a presentation at RubyConf 2010 where a guy from Twitter talked about this being one of the big motivations for them transitioning to a single-page app.
One Trackback
[...] WorkWith the basics out of the way, you can easily begin incorporating dynamic page building with templating engines. If nothing else, you can use jQuery to do some modifications to the content. Once you get the hang [...]