viniceosm/umustache.html

## umustache.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Using mustache</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<style>
	* {
		box-sizing: border-box;
	}
	#menu{
		height: 250px;
		width: 100px;
		float: left;
		background: #c7c7c7;
	}
	#quadrado{
		width: 250px;
		height: 250px;
		background: #e4e4e4;
		padding: 4px;
		float: left;
		overflow: auto;
	}
	.brn{
		background: #beadad;
		padding: 4px 0px;
		cursor: pointer;
		margin: 2px 0px;
	}
	.produtos{
		width: 100%;
		border-collapse: collapse;
	}
	.produto{
		overflow: hidden;
		padding: 2px 0px;
		border-bottom: 1px solid white;
	}
	.produto.nome{
		width: 81%;
		border: initial;
	}
	.produto.preco{
		width: 19%;
		text-align: right;
		vertical-align: bottom;
		border: initial;
	}
</style>

<body onload="loadPerfil()">

	<div id="menu">
		<div class="brn" onclick="loadPerfil()">perfil</div>
		<div class="brn" onclick="loadProduto()">produto</div>
	</div>

	<div id="quadrado">
		<div id="target">Loading...</div>
	</div>

	<script id="templatePerfil" type="x-tmpl-mustache">
		<h4>perfil</h4>

		Hello {{ name }}!
	</script>

	<script id="templateProduto" type="x-tmpl-mustache">
		<h4>produto</h4>

		<table class="produtos">
			{{#produtos}}
				<tr class="produto">
					<td class="produto nome">{{name}}</td>
					<td class="produto preco">R${{preco}}</td>
				</tr>
			{{/produtos}}
		<table>
	</script>


	<script>
	function loadPerfil() {
		var template = $('#templatePerfil').html();
		var usuario = 'Luke';

		Mustache.parse(template);
		var rendered = Mustache.render(template, { name: usuario });
		$('#target').html(rendered);
	}

	function loadProduto() {
		var template = $('#templateProduto').html();
		var produtos = [
			{ "name": 'Heinekein', preco: 10.00 },
			{ "name": 'Velho barreiro', preco: 10.00 },
			{ "name": 'Jack Daniels', preco: 10.00 },
			{ "name": 'Natasha', preco: 10.00 },
			{ "name": 'Askov', preco: 10.00 },
			{ "name": 'Stella Artois', preco: 10.00 },
			{ "name": 'Chopp Stannis 300 ml', preco: 99.00 }
		];

		Mustache.parse(template);
		var rendered = Mustache.render(template, {
			produtos
		});
		$('#target').html(rendered);
	}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Using mustache</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>

	<style>
	* {
	box-sizing: border-box;
	}
	#menu{
	height: 250px;
	width: 100px;
	float: left;
	background: #c7c7c7;
	}
	#quadrado{
	width: 250px;
	height: 250px;
	background: #e4e4e4;
	padding: 4px;
	float: left;
	overflow: auto;
	}
	.brn{
	background: #beadad;
	padding: 4px 0px;
	cursor: pointer;
	margin: 2px 0px;
	}
	.produtos{
	width: 100%;
	border-collapse: collapse;
	}
	.produto{
	overflow: hidden;
	padding: 2px 0px;
	border-bottom: 1px solid white;
	}
	.produto.nome{
	width: 81%;
	border: initial;
	}
	.produto.preco{
	width: 19%;
	text-align: right;
	vertical-align: bottom;
	border: initial;
	}
	</style>

	<body onload="loadPerfil()">

	<div id="menu">
	<div class="brn" onclick="loadPerfil()">perfil</div>
	<div class="brn" onclick="loadProduto()">produto</div>
	</div>

	<div id="quadrado">
	<div id="target">Loading...</div>
	</div>

	<script id="templatePerfil" type="x-tmpl-mustache">
	<h4>perfil</h4>

	Hello {{ name }}!
	</script>

	<script id="templateProduto" type="x-tmpl-mustache">
	<h4>produto</h4>

	<table class="produtos">
	{{#produtos}}
	<tr class="produto">
	<td class="produto nome">{{name}}</td>
	<td class="produto preco">R${{preco}}</td>
	</tr>
	{{/produtos}}
	<table>
	</script>


	<script>
	function loadPerfil() {
	var template = $('#templatePerfil').html();
	var usuario = 'Luke';

	Mustache.parse(template);
	var rendered = Mustache.render(template, { name: usuario });
	$('#target').html(rendered);
	}

	function loadProduto() {
	var template = $('#templateProduto').html();
	var produtos = [
	{ "name": 'Heinekein', preco: 10.00 },
	{ "name": 'Velho barreiro', preco: 10.00 },
	{ "name": 'Jack Daniels', preco: 10.00 },
	{ "name": 'Natasha', preco: 10.00 },
	{ "name": 'Askov', preco: 10.00 },
	{ "name": 'Stella Artois', preco: 10.00 },
	{ "name": 'Chopp Stannis 300 ml', preco: 99.00 }
	];

	Mustache.parse(template);
	var rendered = Mustache.render(template, {
	produtos
	});
	$('#target').html(rendered);
	}
	</script>
	</body>
	</html>