需要启个服务

需引入jquery.js和template.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="format-detection" content="telephone=no">

    <meta name="screen-orientation" content="portrait">

    <meta name="x5-orientation" content="portrait">

    <meta name="full-screen" content="yes">

    <meta name="x5-fullscreen" content="true">

    <meta name="browsermode" content="application">

    <meta name="x5-page-mode" content="app">

    <title>js-template-数据测试应用</title>

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/template.js"></script>

    <style>

        .container{ width: 100%; height: 1500px; background-color: #56aae5; }

        .tit{ font-size: 30px; color: #fff;}

    </style>

</head>

<body >

<section class="container">

    <h1 class="tit">此处占位：向下滑动~渲染结构内容</h1>

</section>

<div id="load-html">

    <ul id="list">

    </ul>

</div>

<div class="getMore" id="getMore" data-html="───────我是有底线的───────" >───────我是有底线的───────</div>

<!--模版结构-->

<script type="text/html" id="t_list">

    {{if list.length==0}}

    <li></li>

    {{else}}

    {{each list as v i}}

    <li>

        <div class="item">

            <div class="tp">

                <a href="javascript:;">

                    <img class="lazy" src="{{v.img}}" alt="" title="">

                </a>

                <i data-id="" class="ico icoLove js-love" ></i>

                {{if v.tag==0}}

                <span class="lab"></span>

                {{else if v.tag==1}}

                <span class="lab labTj"></span>

                {{else if v.tag==2}}

                <span class="lab labNew"></span>

                {{/if}}

            </div>

            <div class="txt">

                <p class="tiName">

                    <a href="javascript:;">{{v.title}}</a>

                </p>

                <div class="bot">

                    {{if v.state==0}}

                    <div class="money fl">

                        <em class="num">{{v.cost}}</em>学习币

                    </div>

                    {{else}}

                    <div class="money moneyNo fl">

                        <em class="num">{{v.cost}}</em>学习币

                    </div>

                    {{/if}}

                    <div class="handle fr">

                        <a href="javascript:;">

                            {{if v.state==0}}

                            <i class="ico icoBuy"></i>

                            <span class="ti00">购买</span>

                            {{else}}

                            <i class="ico icoPlay"></i>

                            <span class="ti00">播放</span>

                            {{/if}}

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </li>

    {{/each}}

    {{/if}}

</script>

<!--滑动渲染加载数据：-->

<script>

    //json字符串处理

    function parseData(d) {

        return typeof(d) == 'string' ? JSON.parse(d) : d;

    }

    //定义方法

    let page  = 1,

        isEnd = false;

    $(window).scroll(function () {

        let $bd = $("#list"),

            $getMore = $("#getMore"),

            html = "",

            scrTop = $(document).scrollTop(),

            nowHig = ($(document).height() - $(window).height());

        if ( scrTop >= nowHig ) {

            $.ajax({

                type    : "get",

                url     : "json/test.json",

                data    : {'page':page},

                dataType:   "json",

                beforeSend(){

                    if (isEnd) {

                        return false;

                    }

                },

                success(data){

                    var d = parseData(data);

                    console.log(d);

                    if(d.status==1){

                        //生成数据

                        var allList = d.allList,

                            newList = [];

                        console.log(allList)

                        for(var k in allList){

                            var value = allList[k];

                            newList[k] = value.map(function (v) {

                                return v;

                            });

                            console.log(newList[k]);

                        }

                        //判断页码:

                        let {totalPage: totalPage, page: currentPage} = d;

                        page++;

                        $getMore.show();

                        if (currentPage == totalPage) {

                            isEnd = true;

                            $getMore.show().html($getMore.data('html'));

                        }

                    }

                    //渲染结构

                    html = template("t_list",newList);

                    $bd.append(html);

                },

                complete(){

                    console.log(isEnd);  //true

                }

            })

        }

    });

</script>

</body>

</html>

　　json数据格式

{

  "allList":{

    "list":[

      {

        "id":"01",

        "img":"imgs/1.jpg",

        "title":"我是标题01",

        "cost":1100,

        "tag":0,

        "state":0

      },

      {

        "id":"02",

        "img":"imgs/2.jpg",

        "title":"我是标题02",

        "cost":1200,

        "tag":1,

        "state":1

      },

      {

        "id":"03",

        "img":"imgs/3.jpg",

        "title":"我是标题03",

        "cost":1300,

        "tag":1,

        "state":1

      },

      {

        "id":"04",

        "img":"imgs/4.jpg",

        "title":"我是标题04",

        "cost":1400,

        "tag":2,

        "state":1

      },

      {

        "id":"05",

        "img":"imgs/5.jpg",

        "title":"我是标题05",

        "cost":1500,

        "tag":1,

        "state":0

      },

      {

        "id":"06",

        "img":"imgs/6.jpg",

        "title":"我是标题06",

        "cost":1600,

        "tag":0,

        "state":1

      },

      {

        "id":"07",

        "img":"imgs/7.jpg",

        "title":"我是标题07",

        "cost":1700,

        "tag":0,

        "state":0

      },

      {

        "id":"08",

        "img":"imgs/8.jpg",

        "title":"我是标题08",

        "cost":1800,

        "tag":0,

        "state":1

      },

      {

        "id":"09",

        "img":"imgs/9.jpg",

        "title":"我是标题09",

        "cost":1900,

        "tag":0,

        "state":0

      }

    ]

  },

  "status":1,

  "page":1,

  "totalPage":1

}

　　

利用tempalte.js模版引擎渲染页面，作对应的数据处理的更多相关文章

  1. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  2. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  3. JS模版引擎[20行代码实现模版引擎读后感]

    曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...

  4. 强制IE使用最高版本引擎渲染页面，避免默认使用IE7引擎导致的页面布局混乱及其它问题

    背景 基于Asp.net MVC的一个Intranet web application, 现象 Application发布到服务器端后,在客户端IE访问页面布局混乱,并有javascript报错 原因 ...

  5. 简单的 js 模版引擎

    简单的 js 模版引擎 var tplEngine = function(tpl, data) { var reg = /<%([^%>]+)?%>/g, regOut = /(^( ...

  6. handlebars.js模版引擎随记

    前台的模版引擎有许多种,相比较而言 我个人更觉得handlebars更为轻便 首先github上下载自新版本的handelbars.js http://handlebarsjs.com 下载下来之后呢 ...

  7. js模版引擎开发实战以及对eval函数的改进

    简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根 ...

  8. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  9. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

随机推荐

  1. 2-3 原生小程序 - 项目app.json配置

    App.json它其实有四五个配置,但是最重要的是pages.windows和tabbar.tabbar是做导航的处理的. 官方推荐的入门配置之一: app.json 它其实有一些字段是限制了这个格式 ...

  2. Rails 插入代码与注释

    醉了醉了,在原来那个表格最后加了然后更新博客,然后最后写的内容就没了.来来回回试了n次都一样.不得已新开一个    插入代码  <% ... %>  打印值  <%= ... %&g ...

  3. mysql left join 出现的结果会重复

    left join 基本用法 MySQL left join 语句格式 A LEFT JOIN B ON 条件表达式 left join 是以A表为基础,A表即左表,B表即右表. 左表(A)的记录会全 ...

  4. json和Jsonp 使用总结（1）

    1.Json的使用 $.getJSON("subPreview", { jsonDatas: JSON.stringify(jsonData) }, function(data) ...

  5. [BZOJ5109/CodePlus2017]大吉大利，晚上吃鸡！

    Description 最近<绝地求生:大逃杀>风靡全球,皮皮和毛毛也迷上了这款游戏,他们经常组队玩这款游戏.在游戏中,皮皮和毛毛最喜欢做的事情就是堵桥,每每有一个好时机都能收到不少的快递 ...

  6. 51nod1265判断四点共面

    1265 四点共面 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出三维空间上的四个点(点与点的位置均不相同),判断这4个点是否在同一个平面内(4点共 ...

  7. 模拟 URAL 1149 Sinus Dances

    题目传送门 /* 模拟:找到规律分别输出就可以了,简单但是蛮有意思的 */ #include <cstdio> #include <algorithm> #include &l ...

  8. TCP/IP 3握手4挥手

    转:摘自<图解TCP/IP>P204 三次握手与四次挥手的状态转移图如下: 如图,由于第二次握手接收端发送SYN+ACK信号所以握手只用了三次,挥手由于接收端ACK和FIN分两次发的,所以 ...

  9. [转]MySQL存储过程

    转自:http://www.cnblogs.com/exmyth/p/3303470.html 14.1.1 创建存储过程 MySQL中,创建存储过程的基本形式如下: CREATE PROCEDURE ...

  10. TCP/IP和UDP的比较

    TCP.UDP详解 1.传输层存在的必要性 由于网络层的分组传输是不可靠的,无法了解数据到达终点的时间,无法了解数据未达终点的状态.因此有必要增强网络层提供服务的服务质量. 2.引入传输层的原因 面向 ...