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

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. Android之AIDL知识总结

    1.AIDL介绍 AIDL是一个缩写,全称是Android Interface Definition Language,翻译为Android接口定义语言.主要用于线程之间的通信,本文主要以不同应用之间 ...

  2. js倒计时，秒倒计时，天倒计时

    按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...

  3. DirectFB 之 分段动画

    动画动态配置 一套素材的目录结构一般如下: 子目录中的图片名称都是以数字命名,比如,1,2, 3, 4,--        而配置文件animation.cfg的格式如下: #width height ...

  4. [Git]02 如何简单使用

     本章将介绍几个最基本的,也是最常用的 Git命令,以后绝大多数时间里用到的也就是这几个命令. 初始化一个新的代码仓库,做一些适当配置:开始或停止跟踪某些文件:暂存或提交某些更新.我们还会展示如何 ...

  5. webpack学习（三）之web-dev-server不能自动刷新问题

    使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题:寻找多方答案后明白了一些: 下面有一些需要注意的点: 1.webpack-dev-server并不能读取你的webpack. ...

  6. 优化单页面开发环境：webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  7. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  8. Linux 服务器 U盘安装（避免U盘启动）

    首先下载两个文件: ·         rhel-server-6.3-i386-boot.iso    启动镜像 ·         rhel-server-6.3-i386-dvd.iso     ...

  9. Mqtt服务器搭建

    .bg { background: #99CC99 } Mqtt服务器搭建 测试环境:CentOS64位 1.安装基础软件 yum install gcc-c++ yum install cmake ...

  10. js原型链部分详细使用说明案例

    1. 'index.html'文件 ```html <!DOCTYPE html> <html lang="en"> <head> <me ...