当前位置: 首页 > 工具软件 > Mustache > 使用案例 >

mustache 模板使用

乔俊才
2023-12-01

//一 ,基本使用

<!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

 类似资料: