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 id="demo" 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 id="view"></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" id="_template"> {{# 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" id="contentscroll"> <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" id="noticeList"> </ul> <!-- 没有数据时 --> <div class="list_empty" id="emptyDiv" style="display:none;text-align:center"> <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" id="loadAnimate"> <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>
