<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/xu.css" />
<script src="./js/rem.js"></script>
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="js/template.js"></script>
<script src="./js/xu.js"></script>
<style>
html,
body {
background-color: #f3f5f7;
margin:0 auto;
padding:0;
}
</style>
</head> <body>
<ul class="xu1"><li class="xu">创建者徐文龙 点击我</li></ul>
<br />
<div class="xu2"></div>
</body>
</html> <script type="text/html" id="couponTitle">
{{each data as value i}}
<ul class="divv">
<li class="xu">我的名字是:{{value.username}}</li>
<li class="xu">我的数学成绩是:{{value.math}}</li>
<li class="xu">我的英语成绩是:{{value.english}}</li>
<li class="xu">我的理综成绩是:{{value.summary}}</li>
<li class="xu">我的语文成绩是:{{value.chinese}}</li>
{{include 'scoreTemplate' value }}
</ul>
{{/each}}
</script>
<script id="scoreTemplate" type="text/html">
<ul class="xuxu">
{{each limian as value i}}
<li>加分项 {{value.three}}</li>
<li>分数{{value.these}}</li>
{{/each}}
</ul>
</script>
这是html文件
$(function() {
$('.xu1').on('click', '.xu', function() {
$.ajax({
type: 'get',
url: './xu.json',
dataType: 'json',
success: function(data) {
console.log(data);
var html = template('couponTitle', data);
$('.xu2').html(html);
},
error: function(data) {
console.dir(data);
$("#info").html("服务器发生错误");
}
});
})
})
这是js文件 包含ajax的请求和arttamplate的模板的使用
{
"data": [
{
"username": "张三",
"chinese": "138",
"math": "120",
"english": "80",
"summary": "250",
"limian": [
{
"three": "国家二级运动员",
"these": "40"
}, {
"three": "奥赛一等奖",
"these": "30"
}
]
}, {
"username": "李四",
"chinese": "120",
"math": "60",
"english": "87",
"summary": "120"
}
]
}
上面的是json数据 我制作的假数据 可以实现返回数据 目前在hbuilder里面可以直接使用 但是有些编辑器里面不能直接使用 ,hbuilder有后台服务器一部分功能,在hbuilder里面可以直接打开. 直接用浏览器不能实现效果. 除非需要配置服务器.
核心的代码在于 {{include 'scoreTemplate' value }} 记住一定是value 不是data.value 不然就无法实现效果. scoreTemplate是另一个模板的id 一定要一致.
最终实现的效果如下
