laytpl.js

laytpl
laytpl 是 JavScript 模板引擎,在字符解析上有着比较出色的表现
使用js模板引擎的原因
能够使html代码结构更简洁,保持html原有格式,js构造html能够速度快省资源。
JavaScript脚本: {{# JavaScript statement }}

//第一步:编写模版。你可以使用一个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;
});

二、内置方法

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  //获取版本号
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容