Skip to content

Instantly share code, notes, and snippets.

@nblenke

nblenke/Underscore, Mustache Template Example

Last active August 29, 2015 13:56
Show Gist options
  • Save nblenke/9074930 to your computer and use it in GitHub Desktop.
Save nblenke/9074930 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Underscore, Mustache Template Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template Example</title>
<meta charset="utf-8">
</head>
<body>
<section id="placeholder0"></section>
<section id="placeholder1"></section>
<!-- Underscore Template Example -->
<script id="template0" type="text/html">
<h1><%= title %></h1>
<ul>
<% _.each(arr, function(item){ %>
<li>
<a href="<%= item.link %>">
<%= item.name %>
</a>
</li>
<% }); %>
</ul>
</script>
<!-- Mustache Template Example -->
<script id="template1" type="text/html">
<h1>{{title}}</h1>
<ul>
{{#arr}}
<li>
<a href="{{link}}">
{{name}}
</a>
</li>
{{/arr}}
</ul>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script>
/*jslint nomen: true */
/*globals $, _, Mustache*/
(function () {
'use strict';
var data = {
title: 'test',
arr: [
{
name: 'testing',
link: 'http://www.google.com'
},
{
name: 'testing again',
link: 'http://www.google.com'
}
]
};
// Underscore
$('#placeholder0').html(_.template($('#template0').html(), data));
// Mustache
$('#placeholder1').html(Mustache.render($('#template1').html(), data));
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment