模板引擎 - 循环
<!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>Document</title>
<script src="./libs/template-web.js"></script>
</head>
<body>
<ul></ul>
<script type="text/template" id="heroTemp">
{{each data}}
<li>
<span>{{$index+1}}</span>---
<span>{{$value.cname}}</span>---
<span>{{$value.skin_name}}</span>
</li>
{{/each}}
</script>
<script>
let list = {
data: [
{
id: 14,
cname: '孙膑',
skin_name: '逆流之时|未来旅行|天使之翼|妖精王'
},
{
id: 15,
cname: '扁鹊',
skin_name: '善恶怪医|救世之瞳|化身博士|炼金王'
},
{ id: 16, cname: '白起', skin_name: '最终兵器|白色死神|狰|星夜王子' },
{
id: 17,
cname: '芈月',
skin_name: '永恒之月|红桃皇后|大秦宣太后|重明'
}
]
}
let html = template('heroTemp', list)
console.log(html)
document.querySelector('ul').innerHTML = html
</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>Document</title>
<script src="./libs/template-web.js"></script>
</head>
<body>
<ul></ul>
<script type="text/template" id="heroTemp">
{{each data v i}}
<li>
<span>{{i+1}}</span>---
<span>{{v.cname}}</span>---
<span>{{v.skin_name}}</span>
</li>
{{/each}}
</script>
<script>
let list = {
data: [
{
id: 14,
cname: '孙膑',
skin_name: '逆流之时|未来旅行|天使之翼|妖精王'
},
{
id: 15,
cname: '扁鹊',
skin_name: '善恶怪医|救世之瞳|化身博士|炼金王'
},
{ id: 16, cname: '白起', skin_name: '最终兵器|白色死神|狰|星夜王子' },
{
id: 17,
cname: '芈月',
skin_name: '永恒之月|红桃皇后|大秦宣太后|重明'
}
]
}
let html = template('heroTemp', list)
console.log(html)
document.querySelector('ul').innerHTML = html
</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>Document</title>
<style type="text/css"></style>
<script src="./libs/template-web.js"></script>
</head>
<body>
<ul></ul>
<script type="text/template" id="textTemp">
<li>{{name}}</li>
<li>{{gender==1?'男':'女'}}</li>
{{if gender == 1}}
<li>男</li>
{{else if gender == 0}}
<li>女</li>
{{else}}
<li>未知</li>
{{/if}}
<li>{{age}}</li>
</script>
<script type="text/template" id="listTemp">
{{each list}}
<span>{{$value.name}}</span> ---
{{if ($value.gender === 1)}}
<span>男</span> ----
{{else if $value.gender ===0}}
<span>女</span> ----
{{else}}
<span>未知</span> ----
{{/if}}
<span>{{$value.age}}</span> <br>
{{/each}}
</script>
<script>
let obj = {
list: [
{
name: 'jack',
gender: 1,
age: 20
},
{
name: 'rose',
gender: 0,
age: 19
},
{
name: 'tom',
gender: 2,
age: 18
}
]
}
let html = template('listTemp', obj)
console.log(html)
document.querySelector('ul').innerHTML = html
</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>Document</title>
<script src="./libs/template-web.js"></script>
<style>
div {
width: 400px;
height: 400px;
border: solid;
}
</style>
</head>
<body>
<div></div>
<script type="text/template" id="comTemp">
<p>{{content}}</p>
<p>{{@content}}</p>
<p>{{#content}}</p>
</script>
<script>
let obj = {
content: '<h2>我是h2</h2><hr>'
}
let html = template('comTemp', obj)
console.log(html)
document.querySelector('div').innerHTML = html
</script>
</body>
</html>
模板的原生语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我们的68</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
<style>
.panel {
width: 900px;
margin: 10px auto;
}
.table img {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">英雄列表管理</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input
type="text"
id="hname"
class="form-control"
placeholder="输入英雄信息..."
autocomplete="true"
/>
<span class="input-group-btn">
<button class="btn btn-default" id="btn_search" type="button">
搜索
</button>
</span>
</div>
</div>
<div class="col-lg-3 col-lg-offset-3">
<button type="button" class="btn btn-success openDialog">
添加英雄
</button>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>英雄名称</th>
<th>英雄性别</th>
<th>头像</th>
<th>操作区</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>a</td>
<td>b</td>
<td>
<img src="" alt="" />
</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="./libs/jquery/jquery.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
<script src="./libs/template-web.js"></script>
<script type="text/template" id="heroListTemp">
<% for(let i=0; i< data.length;i++){ %>
<tr>
<td><%= i+1 %></td>
<td><%= data[i].name %></td>
<% if(data[i].gender==='男'){ %>
<td>男</td>
<% } else { %>
<td>女</td>
<%}%>
<td>
<img src="<%= data[i].img %>" alt="" />
</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<% } %>
</script>
<script>
$(function() {
$.ajax({
url: 'http://127.0.0.1:3001/getHeroList',
success: function(res) {
console.log(res)
let html = template('heroListTemp', res)
$('#tbody').html(html)
},
dataType: 'json'
})
})
</script>
</body>
</html>
使用模板引擎渲染数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我们的68</title>
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
<style>
.panel {
width: 900px;
margin: 10px auto;
}
.table img {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">英雄列表管理</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input
type="text"
id="hname"
class="form-control"
placeholder="输入英雄信息..."
autocomplete="true"
/>
<span class="input-group-btn">
<button class="btn btn-default" id="btn_search" type="button">
搜索
</button>
</span>
</div>
</div>
<div class="col-lg-3 col-lg-offset-3">
<button type="button" class="btn btn-success openDialog">
添加英雄
</button>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>英雄名称</th>
<th>英雄性别</th>
<th>头像</th>
<th>操作区</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
</div>
<script src="./libs/jquery/jquery.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
<script src="./libs/template-web.js"></script>
<script type="text/template" id="heroListTemp">
{{each data}}
<tr>
<td>{{$index + 1}}</td>
<td>{{$value.name}}</td>
<td>{{$value.gender}}</td>
<td>
<img src="{{$value.img}}" alt="" />
</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
{{/each}}
</script>
<script>
$(function() {
$.ajax({
url: 'http://127.0.0.1:3001/getHeroList',
success: function(res) {
let html = template('heroListTemp', res)
$('#tbody').html(html)
},
dataType: 'json'
})
})
</script>
</body>
</html>