Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript Templating Example to show rendering techniques of JS data in HTML or XML formats.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JSON Transform</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"></link>
<script type="text/template" id="tpl-html">
<div class="well">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<% _.each( target, function(i) {%>
<tr>
<td><%= i.id %></td>
<td><%= i.lastName %>, <%= i.firstName %></td>
<td><%= i.email %></td>
<td><%= i.phone %></td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</script>
<script type="text/template" id="tpl-xml">
<data>
<% _.each( target, function(i) {%>
<entry>
<id><%= i.id %></id>
<name>
<last><%= i.lastName %></last>
<first><%= i.firstName %></first>
</name>
<contact>
<email><%= i.email %></email>
<phone><%= i.phone %></phone>
</contact>
</entry>
<% }); %>
</data>
</script>
<script>
var rawData = [
{id:1, firstName:"Homer", lastName:"Simpson", email:"homersimpson@fakeemail.com", phone:"555-123-1234"},
{id:2, firstName:"Bart", lastName:"Simpson", email:"bartsimpson@fakeemail.com", phone:"555-123-2345"},
{id:3, firstName:"Marge", lastName:"Simpson", email:"margesimpson@fakeemail.com", phone:"555-123-3456"},
{id:4, firstName:"Lisa", lastName:"Simpson", email:"lisasimpson@fakeemail.com", phone:"555-123-4567"},
{id:5, firstName:"Maggie", lastName:"Simpson", email:"maggiesimpson@fakeemail.com", phone:"555-123-5678"} ];
function showJSONString() {
$("#output").html( "<pre>" + JSON.stringify(rawData) + "</pre>") ;
$("a").removeClass("btn-warning");
$("#json").addClass("btn-warning");
}
function generateHTML() {
var data = { target:rawData };
var template = _.template( $("#tpl-html").text() );
$("#output").html( template(data) );
$("a").removeClass("btn-warning");
$("#html").addClass("btn-warning");
}
function generateXML() {
var data = { target:rawData };
var template = _.template( $("#tpl-xml").text() );
var xml = template(data);
$("#output").html( "<pre>" + _.escape( xml ) + "</pre>" );
$("a").removeClass("btn-warning");
$("#xml").addClass("btn-warning");
}
</script>
</head>
<body style="padding:50px 10px ">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="javascript:showJSONString()" class="btn" id="json">Show JSON String</a>
<a href="javascript:generateHTML()" class="btn" id="html">Generate HTML</a>
<a href="javascript:generateXML()" class="btn" id="xml">Generate XML</a>
</div>
</div>
</div>
<div id="output">Click a button above to transform the raw JS data.</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.