Skip to content

Instantly share code, notes, and snippets.

@maxim75

maxim75/jquery_templates.html

Created May 17, 2011 03:33
Show Gist options
  • Save maxim75/975888 to your computer and use it in GitHub Desktop.
Save maxim75/975888 to your computer and use it in GitHub Desktop.
Download ZIP
Using jQuery templates
Raw
jquery_templates.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>&star; aaa</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" id="theme">
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" id="theme"></script>
<style>
</style>
</head>
<body>
<ul id="result" />
<script id="testTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b>
(${Value} ${Value<4} ${$item.callFunc(Value)})
{{if $data.list}}
{{tmpl($data.list) "#secondTemplate"}}
{{/if}}
</li>
</script>
<script id="secondTemplate" type="text/x-jquery-tmpl">
* ${$data} <a href="#">{{html $data}}</a>
</script>
<script>
console.log("aaa");
var data = [{ Name: "<strong>On</strong>e", Value: 3 }, { Name: "Two", Value: 4, list: [1,23,4,"<strong>sss</strong>"] }];
$("#testTemplate").tmpl(data, {callFunc: function(x) { return this.data.Value+2; } }).appendTo("#result");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment