layui/docs/laytpl/detail/demo.md

  {{!
<style>
.laytpl-demo{border: 1px solid #eee;}
.laytpl-demo:first-child{border-right: none;}
.laytpl-demo>textarea{position: relative; display: block; width:100%; height: 300px; padding: 11px; border: 0; box-sizing: border-box; resize: none; background-color: #fff; font-family: Courier New; font-size: 13px;}
.laytpl-demo>div:first-child{height: 32px; line-height: 32px; padding: 6px 11px; border-bottom: 1px solid #eee; background-color: #F8F9FA;}
</style>
<div class="layui-row">
  <div class="layui-col-xs6 laytpl-demo">
    <div>模板</div>
    <textarea id="ID-tpl-src">
<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>
{{# }); }}
<p>{{# if(d.list.length === 0){ }}
无数据
{{# } }}</p>
</ul>
    </textarea>
  </div>
  <div class="layui-col-xs6 laytpl-demo">
    <div>数据</div>
    <textarea id="ID-tpl-data">
{
  "title": "Layui 常用模块",
  "list": [
    {
      "modname": "弹层",
      "alias": "layer",
      "site": "layer.domain.com"
    },
    {
      "modname": "表单",
      "alias": "form"
    },
    {
      "modname": "表格",
      "alias": "table"
    },
    {
      "modname": "日期",
      "alias": "laydate"
    },
    {
      "modname": "上传",
      "alias": "upload"
    }
  ]
}
    </textarea>
  </div>
  <div class="layui-col-xs12 laytpl-demo" style="border-top: none;">
    <div class="layui-row">
      <div class="layui-col-xs6">视图</div>
      <div class="layui-col-xs6" style="text-align: right">
        <span id="ID-tpl-viewtime"></span>
      </div>
     </div>
    <div class="layui-padding-sm" id="ID-tpl-view" style="max-height: 300px; padding: 16px; overflow: auto;">…</div>
  </div>
</div>
<div class="layui-clear"></div>
<!-- import layui --> 
<script>
layui.use(function(){
  var laytpl = layui.laytpl;
  var util = layui.util;
  var $ = layui.$;

  // 获取模板和数据
  var get = function(type){
    return {
      template: $('#ID-tpl-src').val(), // 获取模板
      data: function(){  // 获取数据
        try {
          return JSON.parse($('#ID-tpl-data').val());
        } catch(e){
          $('#ID-tpl-view').html(e);
        }
      }()
    };
  };
  
  var data = get();
  
  // 耗时计算
  var startTime = new Date().getTime(), timer = function(startTime, title){
    var endTime = new Date().getTime();
    $('#ID-tpl-viewtime').html((title || '模板解析耗时：')+ (endTime - startTime) + 'ms');
  };

  // 渲染模板
  var thisTpl = laytpl(data.template);

  // 执行渲染
  thisTpl.render(data.data, function(view){
    timer(startTime);
    $('#ID-tpl-view').html(view);
  });
  
  // 编辑
  $('.laytpl-demo textarea').on('input propertychange', function(){
    var data = get();
    if(!data.data) return;
    
    // 计算模板渲染耗时
    var startTime = new Date().getTime();
    
    // 若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增）
    if(this.id === 'ID-tpl-src'){ 
      thisTpl.parse(data.template, data.data); // 解析模板
    }
    
    // 执行渲染
    thisTpl.render(data.data, function(view){
      timer(startTime);
      $('#ID-tpl-view').html(view);
    });
  });
});
</script>
<p>!}}