nblenke/Underscore, Mustache Template Example

## 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>
	<!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>