laytpl : 一款非常轻量的JavaScript模板引擎

最新推荐文章于 2023-08-21 23:36:56 发布

AirZH??

最新推荐文章于 2023-08-21 23:36:56 发布

阅读量221

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/JsonShare/p/6018497.html

版权

//假设你得到了这么一段数据
var data = {
  title: '前端圈',
  intro: '一群码js的骚年，幻想改变世界，却被世界改变。',
  list: [{name: '贤心', city: '杭州'},  {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};

var tpl = document.getElementById('tpl').innerHTML; //读取模版
//方式一：异步渲染（推荐）
laytpl(tpl).render(data, function(render){
  document.getElementById('view').innerHTML = render;
});

//方式二：同步渲染：
var render = laytpl(tpl).render(data);
document.getElementById('view').innerHTML = render;

模板就可写成如下：

<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<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标签存放模板，如：
<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;
});

我实际做的一个实现页面：

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="" name="keywords">
<meta content="" name="description">
<!-- 全局-css -->
<link type="text/css" rel="stylesheet" href="../tools/css/basecore.css"/>
<link type="text/css" rel="stylesheet" href="../tools/css/style.css"/>
<!-- 全局-js -->
<script type='text/javascript' src='../tools/js/common.js'></script>
<script type="text/html" id="_template">
{{# for(var i = 0, len = d.length; i < len; i++){ }}
    <li>
    <p class="item-time">{{d[i].addDate}}</p>
    <div class="item-title-row">
          <div class="item-title">{{d[i].noticeTitle}}</div>
          <div class="item-after"><a href="javascript:goToDetail('{{d[i].id}}')">进入详情<i class="icon icon-right"></i></a></div>
    </div>
    <div class="item-content">
        <div class="item-media list-img"><p><img class="imgthanh" data-original="../../{{d[i].noticePic}}"/></p></div>
        <div class="item-inner">
              <div class="item-title-row moredo3">
                 {{d[i].noticeContent}}                      
              </div>
        </div>
    </div>
    </li>
{{# } }} 
</script>
<title>重要通知列表</title>
</head>
<body class="bjF8F6F0">
<div class="page-group">
   <div class="page">
    
    <div class="content" id="contentscroll"> 
    <header>
       <div class="top-bar-con">
         <div class="tc top-bar-txt">重要信息</div> 
       </div>
    </header>
    <!-- header_start-->
    
    <!-- header_end   -->
    <!-- center_start -->
    
    <ul class="list-block media-list notice-list" id="noticeList">
    
    </ul>
    <!-- 没有数据时 -->
    <div class="list_empty" id="emptyDiv" style="display:none;text-align:center">
        <p class="logoimg"><img class="wht4" src="../tools/images/dlogo1.png"/></p>
        <p class="emptycont"><span><font class="tmptytitle">暂无通知消息哦！</font><br></span></p>
    </div>
    <!-- center_end -->
    <div class="list_loading" id="loadAnimate">
         <span class="glyphicon"></span>
    </div> 
    </div>
  </div>    
</div>
<!-- 请在这底下写js -->
<!-- 全局-js -->
<script type='text/javascript' merge="true" src='../tools/js/core.js'></script>
<script type="text/javascript"> 
var basePath = getRelativeRootPath();
var pNo = 1;
var pSize = 5;
var loadFlag = true;
var allList = new Array();
$(function(){
    initNotice();
    gotoBot();
});

function initNotice(){
    $.encasedAjax(basePath + '/rest/mall/queryNoticeList/'+pNo+'/'+pSize, {},function (data) {
　　　　if(data.noticeList !=null && data.noticeList.length>0){
　　　　　　  var tpl = document.getElementById('_template').innerHTML; //读取模版
            //方式一：异步渲染（推荐）
            laytpl(tpl).render(data.noticeList, function(render){
　　　　　　　　　$("#noticeList").append(render);　
            });//图片延迟加载
            imgoriginal();
            if(data.noticeList.length == pSize){
                loadFlag = true;
                loadAnimate.innerHTML = '<span>上拉加载更多</span>';
            }else{
                loadFlag = false;
                loadAnimate.innerHTML = '<span>没有更多了</span>';
            }
        }else{
            loadFlag = false;
            if(pNo==1){
                $("#emptyDiv").show();
                $("#noticeList").html("");
                loadAnimate.innerHTML = '<span></span>';
                return;
            }
            loadAnimate.innerHTML = '<span>没有更多了</span>';
        }
        
    },{"async":true})
    
}

//分页
function gotoBot(){
    $("#contentscroll").on("scroll", function() {
        var windowHeight = document.getElementById('contentscroll').clientHeight;
        var scrollHeight = document.getElementById('contentscroll').scrollHeight;
        var scrollTop = document.getElementById('contentscroll').scrollTop + document.body.scrollTop;
        if(scrollTop >= (scrollHeight - windowHeight - 100) && loadFlag) {
            pNo++;
            loadFlag = false;
            loadAnimate.innerHTML = '<span class="glyphicon">正在加载中...</span>';
            initNotice(pNo);            
        }
    });
}

function goToDetail(id){
    location.href="articleDetails.html?id="+id;
    
}
</script>   
</body> 
</html>