Skip to content

Instantly share code, notes, and snippets.

@eimg

eimg/javascript-tmpl.html

Created May 30, 2012 09:00
Show Gist options
  • Save eimg/2834748 to your computer and use it in GitHub Desktop.
Save eimg/2834748 to your computer and use it in GitHub Desktop.
Download ZIP
Creating content with Javascript. Using jQuery Template.
Raw
javascript-tmpl.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Javascript Template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
$(function() {
var countries = [
{iso:'AS', name:'American Samoa', iso3:'ASM'},
{iso:'AD', name:'Andorra', iso3:'AND'},
{iso:'AO', name:'Angola', iso3:'AGO'},
{iso:'AG', name:'Antigua and Barbuda', iso3:'ATG'},
{iso:'AR', name:'Argentina', iso3:'ARG'},
{iso:'AM', name:'Armenia', iso3:'ARM'},
{iso:'AT', name:'Austria', iso3:'AUT'},
{iso:'AZ', name:'Azerbaijan', iso3:'AZE'},
{iso:'BS', name:'Bahamas', iso3:'BHS'},
{iso:'BH', name:'Bahrain', iso3:'BHR'},
{iso:'BD', name:'Bangladesh', iso3:'BGD'},
{iso:'BB', name:'Barbados', iso3:'BRB'}
];
$("#template").tmpl(countries).appendTo("#countries");
});
</script>
<script id="template" type="text/x-jquery-tmpl">
<tr>
<td class="highlight">${iso}</td>
<td><a href="#">${name}</a></td>
<td>${iso3}</td>
</tr>
</script>
</head>
<body>
<h1>Countries</h1>
<table id="countries">
<tr>
<th>ISO</th>
<th>Country Name</th>
<th>ISO 3</th>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment