独立组件 社区

laytpl - JavaScript模板引擎

首页 文档说明 性能测试 Node.js版 捐赠获得LayIM

laytpl是一款非常轻量的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积浓缩为不到2KB的字符,laytpl试图打造极致的模版渲染!

//假设你得到了这么一段数据
var data = {
  title: '前端圈',
  intro: '一群码js的骚年,幻想改变世界,却被世界改变。',
  list: [{name: '贤心', city: '杭州'},  {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};

var tpl = document.getElementById('tpl').innerHTML; //读取模版
//方式一:异步渲染(推荐)
laytpl(tpl).render(data, function(render){
  document.getElementById('view').innerHTML = render;
});

//方式二:同步渲染:
var render = laytpl(tpl).render(data);
document.getElementById('view').innerHTML = render;
      

你可以修改下述模版

渲染后的视图

//第一步:编写模版。你可以使用一个script标签存放模板,如:
<script id="demo" type="text/html">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>姓名:{{ d.list[i].name }}</span>
    <span>城市:{{ d.list[i].city }}</span>
  </li>
{{# } }}
</ul>
</script>

//第二步:建立视图。用于呈现渲染结果。
<div id="view"></div>

//第三步:渲染模版
var data = {
  title: '前端攻城师',
  list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
  document.getElementById('view').innerHTML = html;
});
    
 一、模版语法
输出一个普通字段,不转义html:   {{ d.field }}
输出一个普通字段,并转义html:   {{= d.field }}
JavaScript脚本: {{# JavaScript statement }}

二、内置方法
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是一个对象
  {open: '开始标签', close: '闭合标签'}
  
3):laytpl.v  //获取版本号