laytpl : 一款非常轻量的JavaScript模板引擎
//假设你得到了这么一段数据
var data = {
title: '前端圈',
intro: '一群码js的骚年，幻想改变世界，却被世界改变。',
list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
var tpl = document.getElementById('tpl').innerHTML; //读取模版
//方式一：异步渲染（推荐）
laytpl(tpl).render(data, function(render){
document.getElementById('view').innerHTML = render;
});
//方式二：同步渲染：
var render = laytpl(tpl).render(data);
document.getElementById('view').innerHTML = render;模板就可写成如下：
<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<li>
<span>{{ d.list[i].name }}</span>
<span>所在城市：{{ d.list[i].city }}</span>
</li>
{{# } }}
</ul>完整实例：
//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script type="text/html">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<li>
<span>姓名：{{ d.list[i].name }}</span>
<span>城市：{{ d.list[i].city }}</span>
</li>
{{# } }}
</ul>
</script>
//第二步：建立视图。用于呈现渲染结果。
<div ></div>
//第三步：渲染模版
var data = {
title: '前端攻城师',
list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
document.getElementById('view').innerHTML = html;
});我实际做的一个实现页面：
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="" name="keywords">
<meta content="" name="description">
<!-- 全局-css -->
<link type="text/css" rel="stylesheet" href="../tools/css/basecore.css"/>
<link type="text/css" rel="stylesheet" href="../tools/css/style.css"/>
<!-- 全局-js -->
<script type='text/javascript' src='../tools/js/common.js'></script>
<script type="text/html" >
{{# for(var i = 0, len = d.length; i < len; i++){ }}
<li>
<p class="item-time">{{d[i].addDate}}</p>
<div class="item-title-row">
<div class="item-title">{{d[i].noticeTitle}}</div>
<div class="item-after"><a href="javascript:goToDetail('{{d[i].id}}')">进入详情<i class="icon icon-right"></i></a></div>
</div>
<div class="item-content">
<div class="item-media list-img"><p><img class="imgthanh" data-original="../../{{d[i].noticePic}}"/></p></div>
<div class="item-inner">
<div class="item-title-row moredo3">
{{d[i].noticeContent}}
</div>
</div>
</div>
</li>
{{# } }}
</script>
<title>重要通知列表</title>
</head>
<body class="bjF8F6F0">
<div class="page-group">
<div class="page">
<div class="content" >
<header>
<div class="top-bar-con">
<div class="tc top-bar-txt">重要信息</div>
</div>
</header>
<!-- header_start-->
<!-- header_end -->
<!-- center_start -->
<ul class="list-block media-list notice-list" >
</ul>
<!-- 没有数据时 -->
<div class="list_empty" >
<p class="logoimg"><img class="wht4" src="../tools/images/dlogo1.png"/></p>
<p class="emptycont"><span><font class="tmptytitle">暂无通知消息哦！</font><br></span></p>
</div>
<!-- center_end -->
<div class="list_loading" >
<span class="glyphicon"></span>
</div>
</div>
</div>
</div>
<!-- 请在这底下写js -->
<!-- 全局-js -->
<script type='text/javascript' merge="true" src='../tools/js/core.js'></script>
<script type="text/javascript">
var basePath = getRelativeRootPath();
var pNo = 1;
var pSize = 5;
var loadFlag = true;
var allList = new Array();
$(function(){
initNotice();
gotoBot();
});
function initNotice(){
$.encasedAjax(basePath + '/rest/mall/queryNoticeList/'+pNo+'/'+pSize, {},function (data) {
if(data.noticeList !=null && data.noticeList.length>0){
var tpl = document.getElementById('_template').innerHTML; //读取模版
//方式一：异步渲染（推荐）
laytpl(tpl).render(data.noticeList, function(render){
$("#noticeList").append(render);
});//图片延迟加载
imgoriginal();
if(data.noticeList.length == pSize){
loadFlag = true;
loadAnimate.innerHTML = '<span>上拉加载更多</span>';
}else{
loadFlag = false;
loadAnimate.innerHTML = '<span>没有更多了</span>';
}
}else{
loadFlag = false;
if(pNo==1){
$("#emptyDiv").show();
$("#noticeList").html("");
loadAnimate.innerHTML = '<span></span>';
return;
}
loadAnimate.innerHTML = '<span>没有更多了</span>';
}
},{"async":true})
}
//分页
function gotoBot(){
$("#contentscroll").on("scroll", function() {
var windowHeight = document.getElementById('contentscroll').clientHeight;
var scrollHeight = document.getElementById('contentscroll').scrollHeight;
var scrollTop = document.getElementById('contentscroll').scrollTop + document.body.scrollTop;
if(scrollTop >= (scrollHeight - windowHeight - 100) && loadFlag) {
pNo++;
loadFlag = false;
loadAnimate.innerHTML = '<span class="glyphicon">正在加载中...</span>';
initNotice(pNo);
}
});
}
function goToDetail(id){
location.href="articleDetails.html?id="+id;
}
</script>
</body>
</html>