examples/usage-example.htm

<html>
	<head>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
		<script src="https://raw.github.com/janl/mustache.js/master/mustache.js" type="text/javascript"></script>
		<script src="../src/jquery.mustache.js" type="text/javascript"></script>
		<script type="text/javascript">
			(function ($) {
				// Configure jquery-Mustache to warn on missing templates (to aid debugging)
				$.Mustache.options.warnOnMissingTemplates = true;
				
				// Loading templates embedded in the DOM. (HTML)
				$(function () { 
					var output = $('#dom-templates-output');

					// Add all templates found in the DOM (it will search for <script> blocks which 
					// are of type 'text/html'.  Nb: jQuery.onReady must have fired before calling. 
					$.Mustache.addFromDom();
					
					// Render out one of the templates.
					output.mustache('dom-template-a', { name: 'World' });
				});

				// Load in some template from an external file.
				$.Mustache.load('templates.htm')
					.fail(function () { 
						$('#external-templates-output').append('Failed to load templates from <code>templates.htm</code>');
					})
					.done(function () { 
						var output = $('#external-templates-output');

						// List all loaded templates.
						output.append('<p>Templates loaded from <code>templates.htm</code>: ' + $.Mustache.templates().join(', ') + '</p>');
						
						// Render an example template
						output.append($.Mustache.render('hello-world', { name: 'Jonny' }));
	
						// We can also directly call `mustache` on a jQuery element
						output.mustache('hello-world', { name: 'Dave' });
						
						// jQuery-Mustache supports partials (including templates inside other templates).
						output.append($.Mustache.render('partial-example', { name: 'Jonny', title: 'A Partial Example' }));
						
						// We can add new templates as Strings at runtime.
						$.Mustache.add('string-template', '<p>String templates are {{adjective}}</p>');
						output.append($.Mustache.render('string-template', { adjective: '...epic?' }));
						
						// And we can render plaintext templates that have no HTML.
						output.append($.Mustache.render('plaintext'));
	
						// We can render a collection of viewModels instead of one-at-a-time.
						var peeps = [{ name: "sean", fuel: "cake" }, { name: "cat", fuel: "coffee" }];
						output.append('<ul/>').mustache('peeps-list-item', peeps);
					});

				// Load a single template.
				$.Mustache.load('single-template.htm')
					.done(function () {
						var output = $('#external-templates-output');

						output.append($.Mustache.render('single-template', { name: "Dave" }));
					});
				
			})(jQuery);
		</script>
	</head>
	<body>
		<h1>jQuery-Mustache Examples</h1>

		<div id="dom-templates-output">
			<h2>DOM Template examples</h2>
		</div>

		<div id="external-templates-output">
			<h2>External Template examples</h2>
		</div>

		<!-- Templates in the DOM -->
		<script type="text/html" id="dom-template-a">
			<p>Hello, {{name}}, did you know you can load templates direct from the DOM?</p>
		</script>

	</body>
</html>