html 使用mustache.js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用mustache.js相关的知识，希望对你有一定的参考价值。
<!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>以上是关于html 使用mustache.js的主要内容，如果未能解决你的问题，请参考以下文章