Skip to content

Instantly share code, notes, and snippets.

@andersdn
Created January 23, 2017 11:20
Show Gist options
  • Save andersdn/98b4a1a459d1122bd452a329e80fa0c6 to your computer and use it in GitHub Desktop.
Save andersdn/98b4a1a459d1122bd452a329e80fa0c6 to your computer and use it in GitHub Desktop.
some underscore templating
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container">
</div>
<!-- jquery and underscore is overkill for this, but it makes it quicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="html/template" id="template_name_here">
<h1>foo</h1>
<ul>
<% _.each(messages,function(i){ %>
<li><%= i.name %> : <%= i.message %></li>
<% }); %>
</ul>
</script>
<script>
// could be ajax, isnt
var json_content = {
messages:[
{'name':'foo','message':'bar'},
{'name':'foo2','message':'bar2'}
]
}
$(document).ready(function(){
var tpl = _.template($('#template_name_here').html());
$("#container").html(tpl(json_content));
})
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment