JS模板引擎-laytpl

使用实例

laytpl模板引擎使用实例1

laytpl模板引擎使用实例2-表格树

使用js模板引擎的原因

能够使html代码结构更简洁，保持html原有格式，js构造html能够速度快省资源。

使用的js模板引擎

laytpl js模板引擎。laytpl是一款非常轻量的JavaScript模板引擎。地址：http://www.layui.com/laytpl/

laytpl的使用

下载地址：https://github.com/sentsin/laytpl

引用到页面：<script src="xxx/laytpl-v1.1/laytpl/laytpl.js" type="text/javascript"></script>

laytpl文档说明

一、模版语法
输出一个普通字段，不转义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 //获取版本号

使用demo

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