laytpl js模板引擎
阿新 • • 發佈:2018-12-07
常用模塊 彈層 bar layui onf fig 邏輯 render 一位
laytpl js模板引擎。laytpl是一款非常輕量的JavaScript模板引擎。地址:http://www.layui.com/laytpl/
用法與handlebar.js類似,但是比較輕量級,使用更方便。與一般的字符拼接不同的是,laytpl 的模板可與數據分離,集中把邏輯處理放在 View 層,提升代碼可維護性,尤其是針對大量模板渲染的情況,使用:
引入文件
<script src="../js/laytpl.js"></script>
//第一步:編寫模版。你可以使用一個script標簽存放模板,如: <script id="demo" type="text/html"> <h3>{{ d.title }}</h3> <ul> {{# layui.each(d.list, function(index, item){ }} <li> <span>{{ item.modname }}</span> <span>{{ item.alias }}:</span> <span>{{ item.site || ‘‘ }}</span> </li> {{# }); }} {{#if(d.list.length === 0){ }} 無數據 {{# } }} </ul> </script> //第二步:建立視圖。用於呈現渲染結果。 <div id="view"></div> //第三步:渲染模版 var data = { //數據 "title":"Layui常用模塊" ,"list":[{"modname":"彈層","alias":"layer","site":"layer.layui.com"},{"modname":"表單","alias":"form"}] } var getTpl = demo.innerHTML ,view = document.getElementById(‘view‘); laytpl(getTpl).render(data, function(html){ view.innerHTML = html; });
模版語法
分隔符:
如果模版默認的 {{ }} 分隔符與你的其它模板(一般是服務端模板)存在沖突,你也可以重新定義分隔符:
laytpl.config({ open: ‘<%‘, close: ‘%>‘ }); //分割符將必須采用上述定義的 laytpl([ ‘<%# var type = "公"; %>‘ //JS 表達式 ,‘<% d.name %>是一位<% type %>猿。‘ ].join(‘‘)).render({ name: ‘賢心‘ }, function(string){ console.log(string); //賢心是一位公猿 });
完整實例
//第一步:編寫模版。你可以使用一個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; });
laytpl js模板引擎