$('#tmpl_dom_data').mustache();

<div id="rnd_dom_data"></div>
<script id="tmpl_dom_data" type="x-tmpl-mustache" data-target="rnd_dom_data" data-source="data/ages.json">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Idade</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{age}}</td></tr>
		{{/data}}
	</table>
</script>

$('#tmpl_original').mustache
(
	{
		'url'   : 'data/ages.json',
		'method': 'POST',
		'target': 'rnd_original'
	}
);

<div id="rnd_original"></div>
<script id="tmpl_original" type="x-tmpl-mustache">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Idade</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{age}}</td></tr>
		{{/data}}
	</table>
</script>

$('#tmpl_custom_tags').mustache
(
	{
		'url'   : 'data/ages.json',
		'method': 'POST',
		'tags'  : ['[[', ']]'],
		'target': 'rnd_custom_tags'
	}
);

<div id="rnd_custom_tags"></div>
<script id="tmpl_custom_tags" type="x-tmpl-mustache">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Idade</th></tr>
		[[#data]]
			<tr><td>[[name]]</td><td>[[age]]</td></tr>
		[[/data]]
	</table>
</script>

var json_source = {
	"data":
	[
		{
			"name": "Marcelo XP",
			"age": 42
		},
		{
			"name": "DJ Gomes",
			"age": 34
		}
	]
};

$('#tmpl_json_source').mustache
(
	{
		'source': json_source,
		'target': 'rnd_json_source'
	}
);

<div id="rnd_json_source"></div>
<script id="tmpl_json_source" type="x-tmpl-mustache">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Idade</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{age}}</td></tr>
		{{/data}}
	</table>
</script>

var html = 
[
	'<h4><span class="label label-success">',
	'Callback: Done print table',
	'</span></h4>'
];
var callback = function()
{
	var $node = $('#table_with_callback').parent();
	$node.append(html.join(''));
};

$('#tmpl_with_callback').mustache
(
	{
		'url'   : 'data/ages.json',
		'target': 'rnd_with_callback'
	},
	function()
	{
		setTimeout(callback, 1000);
	}
);

<div id="rnd_with_callback"></div>
<script id="tmpl_with_callback" type="x-tmpl-mustache">
	<table id="table_with_callback" class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Idade</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{age}}</td></tr>
		{{/data}}
	</table>
</script>

$('#tmpl_jquery').mustache
(
	{
		'url'              : 'data/ages.json',
		'beforeRenderJson' : function(p_json)
		{
			p_json.data[0].name = 'Xespeta';
			return p_json;
		},
		'beforeRenderItem' : function(p_object)
		{
			if (p_object.age === 34)
			{
				p_object.age = p_object.age * 100;
			}
			return p_object;
		}
	}
);

<script id="tmpl_jquery" type="x-tmpl-mustache">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Idade</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{age}}</td></tr>
		{{/data}}
	</table>
</script>

$('#tmpl_phones').mustache
(
	{
		'url'   : 'data/ages.json',
		'target': 'rnd_phones',
		'append': true
	}
);

$(document).on
(
	'click',
	'#btn-render',
	function(e)
	{
		e.preventDefault();
		self.page = (empty(self.page)) ? 2 : (self.page + 1);
		$('#tmpl_phones').mustache
		(
			{
				'url'   : 'data/ages.json',
				'data'  : { 'page' : self.page },
				'cache' : true,
				'target': 'rnd_phones',
				'append': true
			}
		);
	}
);

<script id="tmpl_phones" type="x-tmpl-mustache">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Telefone</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{phone}}</td></tr>
		{{/data}}
	</table>
</script>
<div id="rnd_phones"></div>

$(document).on
(
	'click',
	'#btn-render-cache-1',
	function(e)
	{
		e.preventDefault();
		$('#tmpl_phones_cache').mustache
		(
			{
				'url'   : 'data/phones-cache-1.json',
				'data'  : { 'page' : self.page },
				'cache' : true,
				'target': 'rnd_phones_cache',
				'append': true
			}
		);
	}
);

$(document).on
(
	'click',
	'#btn-render-cache-2',
	function(e)
	{
		e.preventDefault();
		$('#tmpl_phones_cache').mustache
		(
			{
				'url'   : 'data/phones-cache-2.json',
				'data'  : { 'page' : self.page },
				'cache' : true,
				'target': 'rnd_phones_cache',
				'append': true
			}
		);
	}
);

<script id="tmpl_phones_cache" type="x-tmpl-mustache">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Telefone</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{phone}}</td></tr>
		{{/data}}
	</table>
</script>
<div id="rnd_phones_cache"></div>

$(document).on
(
	'click',
	'#btn-replace-1',
	function(e)
	{
		e.preventDefault();
		$('#tmpl_phones_replace').mustache
		(
			{
				'url'    : 'data/phones-cache-1.json',
				'data'   : { 'page' : self.page },
				'replace': true,
				'target' : 'rnd_phones_replace'
			}
		);
	}
);

$(document).on
(
	'click',
	'#btn-replace-2',
	function(e)
	{
		e.preventDefault();
		$('#tmpl_phones_replace').mustache
		(
			{
				'url'    : 'data/phones-cache-2.json',
				'data'   : { 'page' : self.page },
				'replace': true,
				'target' : 'rnd_phones_replace'
			}
		);
	}
);

<script id="tmpl_phones_replace" type="x-tmpl-mustache">
	<table class="table table-striped table-bordered table-condensed">
		<tr><th>Nome</th><th>Telefone</th></tr>
		{{#data}}
			<tr><td>{{name}}</td><td>{{phone}}</td></tr>
		{{/data}}
	</table>
</script>
<div id="rnd_phones_replace"></div>