lay-tpl · LayUI的學習

[TOC] 官網： http://www.layui.com/doc/modules/laytpl.html#syntax ## 基本代碼 ``` <ul id="userList"></ul> <script id="userListTpl" type="text/html"> {{# layui.each(d, function(index, item){ }} <li>{{ item.user_name }}</li> {{# }); }} </script> <script> // tpl and view var getTpl = userListTpl.innerHTML , view = document.getElementById('userList'); //url and data var url = "/agent/main/apiUserList/companyId/"; var data = { "companyId":data.field.mobile }; //ajax-get $.get(url,data,function(data){ //列表 $("#userList").html(""); laytpl(getTpl).render(data, function(html){ view.innerHTML = html; }); }); </script> ``` ## 為空判斷 ``` {{ item.memo || '暫無' }} ``` ## 其他 ``` <div>{{ d.content }}</div> <h2>{{= d.title }}</h2> <div> {{! 這里面的模板不會被解析 !}}</div> {{# var fn = function(){ return '2017-08-18'; }; if(true){ }} 開始日期：{{ fn() }} {{# } else { }} 已截止 {{# } }} ``` ## if ``` {{# if(d.list.length === 0){ }} 無數據 {{# } }} ``` ## if else ``` {{# if(d.list.length === 0){ }} 1 {{# } else { }} 2 {{# } }} ``` ## laytpl中如何調用自定義函數 ``` <script> laytpl.fn = function(){ return '自定義函數' } </script> 模板中調用： {{# laytpl.fn(); }} ``` ## 實例 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../layui/css/layui.css"/> </head> <body> <div id="view"></div> <script id="demo" type="text/html"> <h3>自定義函數：{{ layui.laytpl.fn() }}</h3> <h3>自定義函數2：{{ layui.laytpl.fn1('hello') }}</h3> <h3>自定義函數2：{{ layui.laytpl.returnFloat('3.100') }}</h3> <h3>{{ d.title }}</h3> </script> <script src="../layui/layui.js"></script> <script> layui.use('laytpl',function(){ var laytpl = layui.laytpl; laytpl.fn = function(){ return 'test'; } laytpl.fn1=function (username) { return username; } laytpl.returnFloat = function(value){ var value=Math.round(parseFloat(value)*100)/100; var xsd=value.toString().split("."); if(xsd.length==1){ value=value.toString()+".00"; return value; } if(xsd.length>1){ if(xsd[1].length<2){ value=value.toString()+"0"; } return value; } } 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; }); }); </script> </body> </html> ```