初探---laytpl（JS模版引擎）

   官网：http://sentsin.com/layui/laytpl/

   代码：　　

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8" />
  <title>测试</title>
</head>
<body>
<div id="view"></div>
</body>
</html>
<script src="Scripts/jquery-1.11.2.min.js"></script>
<script src="Scripts/Bootstrap/js/bootstrap.min.js"></script> 
<!-- 第一步：编写模版。你可以使用一个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}} 
                 {{# if(d.list[i].bg!=null) { }}  
                    {{# for(var j = 0, lenj = d.list[i].bg.length; j < lenj; j++){ }} 
                        <i>{{d.list[i].bg[j].name}} +|+ {{d.list[i].bg[j].size}}</i>
                {{# } }} 
                {{# } }}   
            </span>
        </li>
        {{# } }}
    </ul>
</script>
<!-- 第二步：引入JS文件-->
<script src="Scripts/jquery-1.11.2.min.js"></script>
<script src="Scripts/JSTemp/laytpl.js"></script> 
<!-- 第三步：绑定-->
<script type="text/javascript">
    var data = {
        title: '前端攻城师',
        list: [
            { name: '贤心', city: '杭州' },
            { name: '谢亮', city: '北京' },
            { name: '浅浅', city: '杭州' },
            {
                name: 'Dem', city: '北京', bg: [{ name: "red", size: 5 }, { name: "blue", size: 10 }]
            },
        ]
    };

    var gettpl = document.getElementById('demo').innerHTML;
    laytpl(gettpl).render(data, function (html) {
        document.getElementById('view').innerHTML = html;
    });


    $("#view ul li span").on("click", function () {
        alert($(this).text());
    });
</script>

 

posted @ 2015-06-19 12:00  飘落风尘鬓擒雪  阅读(255)  评论(0)    收藏  举报