Quick and easy in-HTML javascript template system

Unofficial Javascript Logo

Unofficial Javascript Logo (Photo credit: Wikipedia)

So I hate having to build HTML into my javascript.   It requires a careful and obtuse quoting exercise, and uses the “+” to tack strings and variables together.  And there is no concept of multi-line.  Again use the “+” symbol.  It just feels dumb, which likely means I’ve just been doing it the dumb way for years.  I’m sure everyone has figured this out.

But humor me.

Came across this brilliant little hack that lets you define HTML templates using a script tag (of “text/html” type), then puffing it up by passing the tmpl function the ID of your script tag (your in-HTML HTML template) and the data structure (e.g. object returned from a jQuery AJAX request).  You get back a perfectly populated bit of HTML that you can push into another div’s innerHTML.

An in-HTML HTML template system.  Brilliant!

Dig the full scoop here: http://ejohn.org/blog/javascript-micro-templating/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s