请使用firefox,chrome等最新浏览器浏览本站。

精致巧妙的javascript模板引擎-laytpl.js

js+jquery 阿豹 496次浏览 0个评论 扫描二维码

aytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统js引擎的几乎所有功能。
laytpl.js官网

使用方式:

//第一步:编写模版。你可以使用一个script标签存放模板,如:
<script id="demo" type="text/html">
    {{# for(var i = 0, len = d.list.length; i < len; i++){ }}
    <div class="f-dt paihang-table">
    <div class="f-dtr row">
        <div class="f-dtc f-vam cell xuhaoTd" data-num="{{ d.list[i].id }}"></div>
        <div class="f-dtc f-vama cell cell2">
            <div class="peImgDiv hasBorder">
                <img src="assets/img/people.png" >
            </div>
            <div class="f-dib">
                <p class="nameP">{{ d.list[i].name }}</p>
                <p class="zyP">{{ d.list[i].detail }}</p>
            </div>
        </div>
        <div class="f-dtc f-vam cell hasjb yellow">
            <span>{{ d.list[i].price }}</span>
        </div>
    </div>
</div>
{{# } }}
</script>

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

//第三步:渲染模版
var paihangData = {
    type: '排行列表',
    list: [{
        id : 1,
        name : '阿豹',
        detail : '超级球迷',
        price : 2000
    },
    {
        id : 2,
        name : '阿豹2',
        detail : '超级球迷2',
        price : 2000
    }]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(paihangData, 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    //获取版本号

喜欢 (4)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到