014-模板引擎
1. laytpl是JavScript模板引擎。與一般的字符拼接不同的是, laytpl的模板可與數據分離, 集中把邏輯處理放在View層, 提升代碼可維護性, 尤其是針對大量模板渲染的情況。
2. 模塊加載名稱: laytpl。
3. 模版語法
4. 分隔符
4.1. 如果模版默認的{{ }}分隔符與你的其它模板存在沖突, 你也可以重新定義分隔符:
laytpl.config({open: '<%',close: '%>' });// 分割符將必須采用上述定義的 laytpl(['<%# var type = "公"; %>' // JS表達式,'<% d.name %>是一位<% type %>猿。' ].join('')).render({name: '賢心' }, function(string){console.log(string); // 賢心是一位公猿 });5. 例子
5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>模板引擎 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><!-- 第一步: 編寫模版。你可以使用一個script標簽存放模板, 如: --><script id="demo" type="text/html"><h1>{{ d.title }}</h1><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><script type="text/javascript">layui.use('laytpl', function(){var laytpl = layui.laytpl;// 第三步: 渲染模版var data = { // 數據"title": "Layui常用模塊","list": [{"modname": "彈層", "alias": "layer", "site": "http://www.layer.layui.com"}, {"modname": "日期與時間", "alias": "form", "site": "http://www.layui.com/laydate"}]};var getTpl = demo.innerHTML,view = document.getElementById('view');laytpl(getTpl).render(data, function(html){view.innerHTML = html;});});</script></body> </html>5.2. 效果圖
總結
- 上一篇： 013-分页模块
- 下一篇： 015-图片文件上传