【layui】laytpl操作笔记

laytpl 是 Layui 的一款轻量 JavaScript 模板引擎，在字符解析上有着比较出色的表现。

API

API	描述
var laytpl = layui.laytpl	获得 laytpl 模块。
laytpl(str, options).render(data, callback)	laytpl 组件渲染，核心方法
laytpl.config(options)	配置 laytpl 全局属性

模板解析和渲染

laytpl(str).render(data, callback);

• 参数 str : 模板原始字符
• 参数 data : 模板数据
• 参数 callback : 模板渲染完毕的回调函数，并返回渲染后的字符

layui.use('laytpl', function(){
  var laytpl = layui.laytpl;
  // 直接解析字符
  laytpl('{{= d.name }}是一名前端工程师').render({
    name: '张三'
  }, function(str){
    console.log(str); // 张三是一名前端工程师
  });
  // 同步写法
  var str =  laytpl('{{= d.name }}是一名前端工程师').render({
    name: '张三'
  });
  console.log(str);  // 张三是一名前端工程师
});

若模板字符较大，可存放在页面某个标签中，如：

<script id="TPL" type="text/html">
  <h3>{{= d.name }}</h3>
  <p>性别：{{= d.sex ? '男' : '女' }}</p>
</script>
<div id="view"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var laytpl = layui.laytpl;
  // 渲染
  var data = {
    name: '张三',
    sex: 1
  };
  var getTpl = document.getElementById('TPL').innerHTML; // 获取模板字符
  var elemView = document.getElementById('view'); // 视图对象
  // 渲染并输出结果
  laytpl(getTpl).render(data, function(str){
    elemView.innerHTML = str;
  });
});
</script>

在实际使用时，若模板通用，而数据不同，为减少模板解析的开销，可将语句分开书写，如。

var compile = laytpl(str); // 模板解析
compile.render(data, callback); // 模板渲染