标签：color htm 完整 存在 info layer str 轻量级 模板引擎
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; });
标签：color htm 完整 存在 info layer str 轻量级 模板引擎
原文地址：https://www.cnblogs.com/gopark/p/10084113.html
