$.Template

Why use a template?

• Render data as markup

• Separation of display logic from
business logic

• Reusable markup (in theory)

• Maybe it’s cleaner?

• It’s deﬁnitely faster than...

The Other Options

• String Concatenation

• Array.join

• DOM Manipulation

• jQuery.append

String Concatenation
var str = '';

str += 'Hello, ';
str += this.name;
str += '!';

body.innerHTML = str;

Array.join
var arr = [];

arr.push('Hello, ');
arr.push(this.name);
arr.push('!');

body.innerHTML = arr.join('');

DOM Manipulation
var p = document.createElement('P');

var hello = document.createTextNode('Hello, ');

var em = document.createElement('EM');
var world = document.createTextNode(this.name + '!');

em.appendChild(world);

p.appendChild(hello);
p.appendChild(world);

body.appendChild(p);

jQuery.append
$('').append(
'Hello, ',
$('').text(this.name + '!')
).appendTo('body');

JavaScript Templating
Libraries

• mustache.js

• HandlebarJS

• TrimPath JST

• Resig Micro-Templating

• jQuery.template

$.template

• jQuery plugin

• Modiﬁed Resig Micro-
Templating

• Allows inline JavaScript

• Caching

• Ajax

• Faster

$.template Basics

• Converts a string into a function

• Caches the rendered function

• Function renders data as DOM/
HTML

Scope (this)

• Rendered template function is executed in the scope of
the data object

• Dropped with for performance, replaced with this
var str = 'Hello, {%= this.name %}!';

Two Types of Tags

• Output tags pass their values to
the returned output

• Functional tags execute
arbitrary JavaScript, but do not
output any value

Output Tags {%= ... %}
// Output is added to the output
{%= this.property %}

// Ternaries can be used for quick conditionals
{%= this.property ? this.property : "N/A" %}

// JavaScript is executed and added to output
{%= (new Date()).getTime() - (this.birthdate).getTime() %}

Functional Tags {% ... %}
// Value is not added to output
{% var pie = 22/7; }

// Semi-colons not required, but encouraged for best practice
{% var greeting = "Hello, " + this.name }
// WIN

// Double-quotes are STRICTLY REQUIRED
{% var greeting = 'Hello, ' + this.name }
// FAIL

// Single-quotes allowed in strings
{% var greeting = "I'm with " + this.name }
// WIN

Looping an Array
{% for (var i = 0, n = this.images.length; i < n; ++i) { %}
{% var img = this.images[i]; }
<img src="{%= img.src %}" alt="{%= img.description %}">
{% } %}

Conditionals
{% if (this.age > 21) { %}
<a href="booze.html">Drink up!</a>
{% } else { %}
<a href="music.html">Enjoy some tunes!</a>
{% } %}

Subtemplates
<h1>{%= this.name %}</h1>

{% function renderJob (job) { %}
{% var verb = (job.end === "present") ? "work" : "worked"; %}

I {%= verb %} at {%= job.company %} as a
{%= job.position %}

{% } %}

<ul>
{% for (var i = 0, n = this.jobs.length; i < n; ++i) { %}
<li>{% renderJob(this.jobs[i]) %}</li>
{% } %}
</ul>

Subtemplates
<h1>{%= this.name %}</h1>

{% function renderJob (job) { %}
{% var verb = (job.end === "present") ? "work" : "worked"; %}

I {%= verb %} at {%= job.company %} as a
{%= job.position %} {% renderDate(job.start, job.end) %}

{% function renderDate (start, end) { %}
from {%= start %} {%= end === "present" ? "" : "to " + end %}.
{% } %}
{% } %}

<ul>
{% for (var i = 0, n = this.jobs.length; i < n; ++i) { %}
<li>{% renderJob(this.jobs[i]) %}</li>
{% } %}
</ul>

Template Input

• string

• var

• $.ajax (asynchronous)

• DOM (via $.fn.template)

• Ajax (synchronous)

Template Input (string)

var data = { name: 'world' };

var func = $.template(str);
// anonymous()

var elem = $.template(str, data);
// [jquery:template]

var html = $.template(str, data, true);
// Hello, world!

Template Input (DOM)
<script id="tpl" type="text/html">
Hello, {%= this.name %}!
</script>


var func = $('#tpl').template();
// anonymous()

var elem = $('#tpl').template(data);

var html = $('#tpl').template(data, true);

Template Input (Ajax)
var url = 'hello.tpl';


var func = $.template(url);
// anonymous()

var elem = $.template(url, data);

var html = $.template(url, data, true);

Data Input

• Object

• Array (of objects)

Data Input (Object)



Data Input (Array of objects)

var data = [
{ name: 'world' },
{ name: 'Dolly' },
{ name: 'mom' }
];

// Hello, Dolly!
// Hello, mom!

Output

• function

• DOM (as a jQuery instance)

• HTML (as a string)

Output (function)
// This template...
var str = 'Hello, {%= this.name %}!';
var func = $.template(str);

// becomes...
function anonymous() {
var __ = [];
__.push("Hello, ", this.name, "!");
return __.join("");
}

// which can be used as...
var elem = func(data);

// or...
var html = func(data, true);

Output (function)
Hello, 
{% if (this.name) { %}
{%= this.name %}
{% } else { %}
stranger
{% } %}
!

function anonymous() {
var __ = [];
__.push("Hello, ");
if (this.name) {
__.push("", this.name, "");
} else {
__.push("stranger");
}
__.push("!");
return __.join("");
}

Output (DOM)

DOM output is wrapped in <jquery:template/> to allow
jQuery manipulation and to protect leading and trailing
fragments and elements
<jquery:template>
Hello, world!
Hello, Dolly!
Hello, mom!
</jquery:template>

Hello, world!
// FAIL world!

Goodbye, cruel world!
// FAIL Goodbye

Output (DOM)

Attempted a patch to jQuery to wrap leading and trailing
fragments as text nodes, but then
var elem = $(tpl, obj).appendTo('body').hide();
// FAIL

would require rewrite of all of jQuery's DOM functions :(

Output (DOM)

Still breaks in some instances where markup is too invalid
$.template('<tr><td>{%= this.name %}</td></tr>', data)
.appendTo('<table/>');

<jquery:template>
<tr>
<td>Hello, world!</td>
<td>Hello, Dolly!</td>
<td>Hello, mom!</td>
</tr>
</jquery:template>
<table/>
// FAIL
// Invalid markup squirts out of the target element

Output (HTML)

Fix: use true to render as HTML
var html = $.template('<tr><td>{%= this.name %}</td></tr>',
data, true);

// <tr>
// <td>Hello, world!</td>
// <td>Hello, Dolly!</td>
// <td>Hello, mom!</td>
// </tr>

$('<table/>').append(html);

Known Issues

• Does not properly extract DOM
text in IE (ﬁx on the way)

• Breaks in some cases where
markup is invalid

Thanks!

• http://github.com/furf/jquery-template

$.Template

More Related Content

What's hot

Similar to $.Template

Recently uploaded

$.Template