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

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. webService基础知识--认识WebService

    之前在找工作的时候,有面试官问到WebService,当时没有接触过,正好现在做的项目中有用到WebService,所以就趁着业余时间来学习了. 一.简介 先来看看百度百科对WebService的解释 ...

  2. codeforces 757F Team Rocket Rises Again

    链接:http://codeforces.com/problemset/problem/757/F 正解:灭绝树. mdzz倍增lca的根节点深度必须是1..我因为这个错误调了好久. 我们考虑先求最短 ...

  3. IO调度器原理介绍

    IO调度器(IO Scheduler)是操作系统用来决定块设备上IO操作提交顺序的方法.存在的目的有两个,一是提高IO吞吐量,二是降低IO响应时间.然而IO吞吐量和IO响应时间往往是矛盾的,为了尽量平 ...

  4. 在Mvc中进行异步请求是出现（没有为该对象定义无参数的构造函数）

    解决办法就是给相应的类添加无参数的构造函数:

  5. Spring+SpringMvc+Mybatis 框架的搭建（二）

    4.4 mybatis-config.xml 这部分可以配置也可以不配置. <?xml version="1.0" encoding="UTF-8" ?& ...

  6. 亲测可用！！！golang如何在idea中保存时自动进行代码格式化

    亲测可用,golang在idea中的代码自动格式化 1.ctrl+alt+s打开设置界面,选择[Plugins] -> [Install JetBrains plugin...] -> 搜 ...

  7. Web常见约定规范（精选）

    常见的约定规范 (一)HTML约定规范 1,html属性顺序:id class name data-xxx (src for type href)(title alt)(aria-xxx role) ...

  8. 1008 Elevator

    Problem Description The highest building in our city has only one elevator. A request list is made u ...

  9. Linux下链接数据库图形化工具

    (一).Linux环境下mysql的安装.SQL操作 Linux下安装MySQL (rmp --help) 基本步骤:上传软件->检查当前Linux环境是否已经安装,如发现系统自带的,先卸载-& ...

  10. hdu1054 Strategic Game 树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1054 思路:树形DP,用二分匹配也能解决 定义dp[root][1],表示以root 为根结点的子树且 ...