當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
laytpl : 一款非常轻量的JavaScript模板引擎
生活随笔
收集整理的這篇文章主要介紹了
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;
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>
模板就可寫成如下：
<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>
?
- 參考：http://laytpl.layui.com/
轉載于:https://www.cnblogs.com/JsonShare/p/6018497.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的laytpl : 一款非常轻量的JavaScript模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS常用指令
- 下一篇： javascript函数调用的几种方式