Skip to content

Instantly share code, notes, and snippets.

@andrew8088
Created March 26, 2010 01:46
Show Gist options
  • Save andrew8088/344378 to your computer and use it in GitHub Desktop.
Save andrew8088/344378 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Templating Demo</title>
<style type="text/css">
html {
background:#f3f3f3;
font: 13px/1.5 helvetica, arial, san-serif;
}
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
overflow:hidden;
width:100px;
height:100px;
border:1px solid #494949;
padding:10px;
margin:10px;
position:relative;
}
li p {
position:relative;
margin:0;
z-index:1;
}
li span {
position: absolute;
font-size:700%;
color:#ececec;
right:0;
}
</style>
</head>
<body>
<ul></ul>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.tmpl.js"></script>
<script id="listTemplate" type="text/html">
<li>
<span>{%= $i + 1 %}</span>
<p><strong>Name: </strong> {%= name %}</p>
{% if ($context.options.showAge) { %}
<p><strong>Age: </strong> {%= age %}</p>
{% } %}
</li>
</script>
<script type="text/javascript">
var data = [
{ name : "John", age : 25 },
{ name : "Jane", age : 49 },
{ name : "Jim", age : 31 },
{ name : "Julie", age : 39 },
{ name : "Joe", age : 19 },
{ name : "Jack", age : 48 }
];
$("#listTemplate").render(data, { showAge : true }).appendTo("ul");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment