jquery jtemplates.js模板渲染引擎的详细用法第三篇
<span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery - jTemplates</title>
<!-- <link rel="stylesheet" type="text/css" href="./css/style.css"> -->
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
<style type="text/css">
.container{
1000px;
height: 600px;
margin: 0 auto;
}
.template{
display: none;
}
table{
background-color: #fff;
}
table tr th{
padding: 8px;
border-bottom: 1px solid #eee;
}
table tr td{
padding: 10px;
border-bottom: 1px solid #eee;
}
</style>
<script type="text/javascript">
$(function(){
// 初始化JSON数据
// 通过getJSON方法加载
// $.getJSON("./data/dataSource1.json", function(data){
// // 设置模板
// $("#result").setTemplateElement("template");
// // 给模板加载数据
// $("#result").processTemplate(data);
// });
// 通过ajax方法加载
$.ajax({
type:"post",
dataType:"json",
url:"./data/dataSource1.json",
success:function(data){
// alert(data);
// 设置模板
$("#result").setTemplateElement("template");
// 给模板加载数据
$("#result").processTemplate(data);
},
error:function(error){
alert("error:" + error.responseText);
}
});
});
</script>
</head>
<body>
<div class="container">
<div><h1>标题</h1></div>
<div id="result"></div>
<textarea id="template" class="template">
{#template MAIN}
<table>
<tr>
<td>Id</td>
<td>标题</td>
<td>发布时间</td>
</tr>
{#foreach $T.Lists as r}
{#include ROW root=$T.r}
{#/for}
</table>
{#/template MAIN}
{#template ROW}
<tr>
<td>{$T.Id}</td>
<td>{$T.Title}</td>
<td>{$T.CreateDate}</td>
</tr>
{#/template ROW}
</textarea>
</div>
</body>
</html></span>
这个是一个例子