layui的laytpl使用，以table应用为例

laytpl是javascript模板引擎，在字符解析上有着教出色的表现，欠缺之处在于异常调试上。

应用：

table中某个字段值为obj类型的，需要遍历每个值进行处理后显示时	<script type="text/html" id="value_mapping"> <div class="rowspan"> {{# layui.each(d.value_mapping, function(key, value){ }} <span> <span style = "font-weight:bold;">{{ key}}</span>:<span>{{value}}</span> </span> {{# }); }} </div> </script>
table中需要判断某个字段值进行相应处理后显示的	<script type="text/html" id="code"> <span> {{# if(d.code==1) { }} 一 {{# } else if(d.code==2) { }} 二 {{# } else if(d.code==3) { }} 三 {{# } else if(d.code==4) { }} 四 {{# } else if(d.code==5) { }} 五 {{# } else{ }} 大于五 {{# }}} </span> </script>

快速使用：

//直接解析字符
layui.use('laytpl',function(){
    var laytpl = layui.laytpl;
    laytpl('{{d.name}}是一个例子').render(
        {name:'这'},function(str){
            console.log(str);//这是一个例子
    });
//同步写法，将render方法的回调函数剔除，可直接返回渲染好的字符
var str = laytpl('{{d.name}}是一个例子').render({name:'这'});
console.log(str);//这是一个例子
//如果模板较大，你也可以采用数据的写法，这样会比较直观一些
laytpl(['{{d.name}}是一个例子','其它信息{{d.content}}    其它信息'].join(''));
});

将模板存储在页面或其它任意位置：

//第一步：编写模板。可以使用一个script标签存放模板
<script type="text/html" id="demo">
    <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>

//第三步：渲染模板
var data = {
    "title":"模块"
    ,"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}}	输出一个普通字段，不转义html	<span>{{d.title}}</span>
{{=d.field}}	输出一个普通字段，并转义html	<div>{{=d.title}}</div>
{{# JavaScript表达式}}	js语句。一般用于逻辑处理。 ps：如果想输出一个函数，正确写法为：{{fn()}}	{{# var fn = function(){ 扫描二维码关注公众号，回复： 3145714 查看本文章     return '20180820'; }; }} {{# if(true){}} 开始日期：{{ fn()}} {{# }else{}} 已截止 {{# } }}
{{! template !}}	对一段指定的模块区域进行过滤，即不解析该区域的模板。 ps：layui2.1.6新增	<div>{{! 这里面的模板不会被解析 !}}</div>

分隔符：

//如果模板默认{{}}分隔符与其它模板(一般是服务端模板)存在冲突，可以重新定义分隔符
laytpl.config({
    open:'<%',
    close:'%>'
});
//分隔符将必须采用上述定义的
laytpl([
  '<%# var type = "公"; %>' //JS 表达式
  ,'<% d.name %>是一位<% type %>猿。'
].join('')).render({
  name: '贤心'
}, function(string){
  console.log(string); //贤心是一位公猿
});