Layui 模板laytpl

//第一步：编写模版。你可以使用一个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; });

模板语法

{{ d.field }} 不转义 {{= d.field }} 转义 {{# JavaScript表达式 }} {{# var fn = function(){ return '2017-08-18'; }; }} {{# if(true){ }} 开始日期：{{ fn() }} {{# } else { }} 已截止 {{# } }}

{{! template !}} 对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增 <div> {{! 这里面的模板不会被解析 !}}</div>

重新定义模板分隔符

laytpl.config({ open: '<%', close: '%>' });

//分割符将必须采用上述定义的 laytpl([ '<%# var type = "公"; %>' //JS 表达式 ,'<% d.name %>是一位<% type %>猿。' ].join('')).render({ name: '贤心' }, function(string){ console.log(string); //贤心是一位公猿 });