6 Star 14 Fork 6

笔心 / tpl

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 1.62 KB
一键复制 编辑 原始数据 按行查看 历史
笔心 提交于 2016-11-02 18:39 . Update README.md

##简单小巧,性能出众的js模板引擎,原生js语法,压缩版不到1k

演示地址

http://qinshenxue.oschina.io/tpl/

语法

模板数据及工具方法

传入模板中的数据参数名为$data 使用工具方法(API中说明了如何增加工具方法)通过$tools调用

输出属性值

<div> {{= $data.propName }} </div>
<div> {{= Math.random() }} </div>
<div> {{= $tools.formatDate($data.date) }} </div>

js原生语法

{{ if( $data.really){ }}
<div>do sth...</div>
{{ }else{ }}
<div>do sth...</div>
{{ } }}
{{ var list=$data.list; }}
{{ for(var i=0,j=list.length;i<j;i++){ }}
    <div>{{= list[i]}}</div>
{{ } }}

API

###tpl(tplId,data)

  • tplId 存放模板的容器id
  • data 渲染模板的数据 返回渲染结果
document.getElementById('output').innerHTML = tpl('tpl-example',{list:[1,2,3]});

###tpl.compile(source[,cacheId])

  • source 要编译的模板内容
  • [非必须]cacheId 缓存的id 返回渲染函数
var render=tpl.compile('{{=$data.prop}}');
render({prop:'hello world'});

###tpl.render(tplId,data) 同tpl(tplId,data)

tpl.tool(toolName,toolFunction) 添加工具方法,在模板中可以调用

  • toolName 工具方法名
  • toolFunction 工具方法
tpl.tool('formatDate', function (date) {
        var d = new Date(date);
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
    });

模板内使用

<div> {{= $tools.formatDate($data.date) }} </div>
JavaScript
1
https://gitee.com/qinshenxue/tpl.git
git@gitee.com:qinshenxue/tpl.git
qinshenxue
tpl
tpl
master

搜索帮助