Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist
View jqTemplating.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
<!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
Something went wrong with that request. Please try again.