//假设你得到了这么一段数据

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 = , 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>

laytpl : 一款非常轻量的JavaScript模板引擎的更多相关文章

  1. Tippy.js – 轻量的 Javascript Tooltip 工具库

    工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息.如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象.Tippy.js 是一款帮助你快速创 ...

  2. 2017年最新20个轻量的 JavaScript 库和插件

    下面这个列表中的免费 JavaScript 插件都是今年发布的,没有臃肿的一体化的框架,它们提供轻量级的解决方案,帮助 Web 开发过程更容易和更快.提供的插件可以创建滑块.响应式菜单.模态窗口.相册 ...

  3. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  4. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  5. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  6. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  7. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  8. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  9. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

随机推荐

  1. System.map详解

    system.map内容格式为:线性地址类型符号 具体内容如下: 00100000 A phys_startup_32 c0100000 T startup_32 c0100000 A _text   ...

  2. mui开发app之webview是什么

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...

  3. oracle修改有数据的字段属性

    正常情况下,有数据时不能直接修改属性,我们可以先备份,然后清空现有数据,然后再修改和还原,过程如下: //先缓存表CREATE TABLE T_TABLE1 AS SELECT * FROM tabl ...

  4. hdu1151有向图的最小顶点覆盖

    有向图的最小路径覆盖=V-二分图最大匹配. Consider a town where all the streets are one-way and each street leads from o ...

  5. CSS3特效----图片动态提示效果

    需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...

  6. JAVA CyclicBarrier类详解

    一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待,此时CyclicBarrie ...

  7. wifi驱动总结（1）

    一.wifi平台设备驱动注册过程Path:Rtw_android.c (rk3399\kernel\drivers\net\wireless\rockchip_wlan\rtl8723au\os_de ...

  8. Hibernate 核心接口和工作机制

    主要内容 Configuration类 sessionFactory接口 session接口 Transaction接口 Query 和 criteria接口 1.Configuration类 负责管 ...

  9. jquery源码 DOM加载

    jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...

  10. git常用命令记录

    配置本地仓库 git config --global user.name.git config --global user.email 查看配置详情 git config -l 初始仓库 git in ...