Skip to content

Instantly share code, notes, and snippets.

@digvijaybhakuni

digvijaybhakuni/demoMustacheBydbhakuni.html

Last active August 29, 2015 14:06
Show Gist options
  • Save digvijaybhakuni/b7b64ac348589855ac0b to your computer and use it in GitHub Desktop.
Save digvijaybhakuni/b7b64ac348589855ac0b to your computer and use it in GitHub Desktop.
Download ZIP
Example MustacheJS With JQuery by Digvijay Bhakuni
Raw
demoMustacheBydbhakuni.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Mustache Sample</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
</head>
<body>
<h2>Example Mustache With JQuery by Digvijay Bhakuni</h2>
<div id="displayDiv">
</div>
<script id="template-m2" type="text/html" style="display:none;">
<table>
<tr>
<td colspan="3" >{{ title }}</td>
</tr>
{{ #lists }}
<tr>
<td>{{ name }}</td>
<td>{{ education }}</td>
<td id="{{uunid}}idForTemp{{id}}" >
<input type="text" value="{{id}}-{{uunid}}" />
</td>
</tr>
{{ /lists }}
</table>
</script>
<script type="application/javascript">
var template = $("#template-m2").html();
var dataView = {
'lists': [
{name : 'digvijay', education : "B.Sc" , id : "123"},
{name : 'santosh' , education : "B.Tech" , id : "456"},
{name : 'sparrow' , education : "B.Tech" , id : "789"},
{name : 'pankaj' , education : "MCA" , id : "147"}
],
'title': 'Name Education List',
'uunid': 1
};
var dataList = [];
var output = Mustache.to_html(template, dataView);
$("#displayDiv").html(output);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment