<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>视图模板引擎 - layui</title>

<link rel="stylesheet" href="../src/css/layui.css">
<style>
.laytpl-demo{border: 1px solid #EBEBEB;}
.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 #EBEBEB; background-color: #F8F9FA;}
</style>
</head>
<body>

<div>
  
  <div class="layui-row">
    <div class="layui-col-xs6 laytpl-demo">
      <div>模板</div>
      <textarea id="demoTPL1"><h1>{{ d.title }}</h1>

<p>转义输出(HTML)：{{ d.desc }}</p>
<p>转义输出(HTML)：{{= d.desc }}</p>
<p>原始输出(HTML)：{{- d.desc }}</p>
{{#}}

<div class="layui-section">
  <hr>
  <ul>
  {{# var str = "a  b		c";
  layui.each(d.items, function(index, item){ }}
    <li class="{{ index > 0 ? 'list' : '' }}">
      <strong>{{ item.title }}</strong>
      {{# if(item.content){ }}
        <span>{{ item.content }}</span>
      {{# } }}
      <span>{{ item.time || '' }}</span>
      {{ str }}
      
      
    </li>
  {{# });  if(d.items.length === 0){ }}
    无数据
  {{# } }} 
  </ul>
  <hr>
</div>

<div>
  {{ d.content || '' }}
  {{ }} {{}}
  {{ }}
  
  \a
  '12'"""""
  "哈''哈"
</div>

<p>渲染时间：{{ layui.util.toDateString(new Date()) }}</p></textarea>
    </div>
    
    <div class="layui-col-xs6 laytpl-demo">
      <div class="layui-row">
        <div class="layui-col-xs3">数据</div>
        <div class="layui-col-xs9" style="text-align: right">
          <button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="createData">生成数据</button>
        </div>
      </div>
      <textarea id="demoData1">
{
  "title": "标题",
  "desc": "<a href=\"\" style=\"color:blue;\">一段描述</a>",
  "items": [
    {
      "title": "list 1",
      "child": [{
        "title": "list 1-1",
        "child": [{
          "title": "list 1-1-1"
        }]
      }]
    },
    {
      "title": "list 2",
      "child": [{
        "title": "list 2-1"
      }]
    },
    {"title": "list 3"}
  ]
}</textarea>
    </div>
    <div class="layui-col-xs12 laytpl-demo">
      <div class="layui-row">
        <div class="layui-col-xs4">视图</div>
        <div class="layui-col-xs4" style="text-align: center">
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="test1">性能测试</button>
        </div>
        <div class="layui-col-xs4" style="text-align: right">
          <span id="demoViewTime"></span>
        </div>
       </div>
      <div class="layui-padding-sm" id="demoView1"></div>
    </div>
  </div>
  
  
  <script type="type/html" template id="demoTplCommon">
    公共模板 - {{ d.title }}
  </script>
  
  <script type="type/html" template id="demoTplList">
    {{# if(d.items && d.items.length > 0){ }}
      <ul>
        {{# layui.each(d.items, function(index, item){ }}
          <li><strong>{{ item.title }}</strong>{{ laytpl.include('demoTplList', {items: item.child}) }}</li>
        {{# }); }}
      </ul>
    {{# } }}
  </script>

  <script type="type/html" template id="laytplTestTpl">
    {{# for(var i = 0; i < d.items.length; i++){ }}
      第{{= d.items[i].index }}个，Name: {{- d.items[i].name }}   Number: {{= d.items[i].number }} 
    {{# } }}
  </script>
  
</div>

<script src="../src/layui.js"></script>
<script>
layui.use(['laytpl', 'util'], function(){
  var laytpl = layui.laytpl;
  var util = layui.util;
  var $ = layui.$;
  
  //获取模板和数据
  var get = function(type){
    return {
      template: $('#demoTPL1').val() //获取模板
      ,data: function(){  //获取数据
        try {
          return JSON.parse($('#demoData1').val());
        } catch(e){
          $('#demoView1').html(e);
        }
      }()
    };
  };
  
  var data = get();
  
  //耗时计算
  var startTime = new Date().getTime(), timer = function(startTime, title){
    var endTime = new Date().getTime();
    $('#demoViewTime').html((title || '模板解析耗时：')+ (endTime - startTime) + 'ms');
  };

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

  //执行渲染
  thisTpl.render(data.data, function(view){
    timer(startTime);
    $('#demoView1').html(view);
  });
  
  //编辑
  $('.laytpl-demo textarea').on('input', function(){
    var data = get();
    if(!data.data) return;
    
    //计算模板渲染耗时
    var startTime = new Date().getTime();
    
    //若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增）
    if(this.id === 'demoTPL1'){ 
      thisTpl.parse(data.template, data.data); //解析模板
    }
    
    //执行渲染
    thisTpl.render(data.data, function(view){
      timer(startTime);
      $('#demoView1').html(view);
    });
  });
  
  //事件
  util.event('lay-on', {
    //性能测试
    test1: function(){
      var dataLen = 1000 //数据量
      ,renderTimes = 1000; //渲染次数
      
      //初始化数据
      var data = {
        title: '性能测试'
        ,items: function(items){
          for(var i = 0; i < dataLen; i++){
            items.push({
              index: i
              ,name: '<strong style="color: red;">张三</strong>'
              ,number: 100+i
            });
          }
          return items;
        }([])
      };
      
      //模板
      var startTime = new Date();
      for(var j = 0; j < renderTimes; j++){
        var template = document.getElementById('laytplTestTpl').innerHTML;
        var html = laytpl(template).render(data);
      }
      timer(startTime, '本次测试耗时：');
      $('#demoView1').html(html);
      
    }
  });

  // 自定义标签符
  laytpl(`
    <%# var job = ["前端工程师"]; %>
    <%= d.name %>是一名<%= job[d.type] %>。
  `, {
    open: '<%',
    close: '%>'
  }).render({
    name: '张三',
    type: 0
  }, function(str){
    console.log(str); // 张三是一名前端工程师。
  });
});
</script>
</body>
</html>
