模板引擎文档 - layui.laytpl

同样早在2014年就已经推出,在字符解析上有着比较出色的表现,欠缺之处在于异常调试上。由于传统意义的前端模板引擎已经变得不再流行,所以laytpl后续可能会进行重写,目前方向暂时还没有想好,预计会在layui比较稳定后开始实施。

模块加载名称:laytpl,在线演示:http://www.layui.com/demo/laytpl.html

layui.use('laytpl', function(){
  var laytpl = layui.laytpl;
  
  //使用方式跟独立组件完全一样
  laytpl('{{ d.name }}是一位公猿').render({
    name: '贤心'
  }, function(string){
    console.log(string); //贤心是一位公猿
  });
}); 
      

或者读取页面中的模版:

//第一步:编写模版。你可以使用一个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;
laytpl(getTpl).render(data, function(html){
  view.innerHTML = html;
});
      
 一、模版语法
输出一个普通字段,不转义html:   {{ d.field }}
输出一个普通字段,并转义html:   {{= d.field }}
逻辑处理: {{#  JavaScript 表达式 }} 
(
  注意:只能是表达式,不能为 {{#  fn() }} 的这样的写法,只能为:{{ fn() }} 
  正确的写法是: 
  {{#  if(true){ }}
    内容:{{ fn() }}
  {{#  } }}
 )
 
二、内置方法
1):laytpl(template);   //核心函数,返回一个对象
  
  var tpl = laytpl(template);
  tpl.render(data, callback);   //渲染方法,返回渲染结果,支持异步和同步两种模式
  
  a):异步
  tpl.render(data, function(result){
    console.log(result);
  });
  
  b):同步
  var result = tpl.render(data);
  console.log(result);
  
2):laytpl.config(options); //初始化配置,options是一个对象,如:
laytpl.config({
  open: '开始标签'
  ,close: '闭合标签'
});
      

好像没什么可以总结的呢。

Layui - 用心与你沟通