mustache 模板使用
生活随笔
收集整理的這篇文章主要介紹了
mustache 模板使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
//一 ,基本使用
<!DOCTYPE html><html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.2.min.js"></script>
<script src="mustache.min.js" ></script>
<style>
ul, li {
list-style: none;
padding: 30px;
}
</style>
</head>
<body οnlοad="loadUser()">
<ul id="target"></ul>
<script id="template" type="x-tmpl-mustache">
<li>{{ name }}</li>
<li>{{ age }}</li>
</script>
?
</body><script>
function loadUser() {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke",age:34});
$('#target').html(rendered);
}
</script>
</html>
//2,對象循環使用
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.2.min.js"></script>
<script src="mustache.min.js" ></script>
<style>
ul, li {
list-style: none;
padding: 30px;
}
</style>
</head>
<body οnlοad="loadUser()">
<ul id="target"></ul>
<script id="template" type="x-tmpl-mustache">
{{#listData}}
{{name}}
{{/listData}}
</script>
</body>
<script> function loadUser() {
var obj = [
{
"name": "名稱1",
"id": 1,
"age": "23",
},
{
"name": "名稱2",
"id": 2,
"age": "23",
},
{
"name": "名稱3",
"id": 3,
"age": "23",
}
];
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {"listData":obj});
$('#target').html(rendered);
}
</script>
</html>
?
轉載于:https://www.cnblogs.com/zhaozhenzhen/p/8795891.html
總結
以上是生活随笔為你收集整理的mustache 模板使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server中SCAN 和SEE
- 下一篇： 原生JS字符串操作方法汇总