需要启个服务

需引入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. SQLServer 存储过程 SET NOCOUNT { ON | OFF } 的使用

    在JDBC中调用 sql server 的存储过程时“该语句没有返回结果集”异常: 解决方法:在存储过程首行加上   SET NOCOUNT ON   使返回的结果中不包含有关受 Transact-S ...

  2. 01_c++下jni开发说明

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  3. git 删除本地仓库

    更新: 2017/06/27 修改格式,备注mac下的命令没测试过   windows: rm .git/ mac: sudo rm -rf .git/ 没验证

  4. unable to unroll loop 报错

    unable to unroll loop, loop does not appear to terminate in a timely manner (1024 iterations) 原本代码 f ...

  5. 【转】20道Spring Boot面试题

    面试了少量人,简历上都说自己熟习 Spring Boot, 或者者说正在学习 Spring Boot,一问他们时,都只停留在简单的使用阶段,很多东西都不清楚,也让我对面试者大失所望. 下面,我给大家总 ...

  6. 洛谷 P1582 倒水

    题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...

  7. 1.2打印ASCII码

    描述 输入一个除空格以外的可见字符(保证在函数scanf中可使用格式说明符%c读入),输出其ASCII码. 输入一个除空格以外的可见字符.输出一个十进制整数,即该字符的ASCII码.样例输入 A 样例 ...

  8. Windows平台下Oracle 11g R2监听文件日志过大，造成客户端无法连接的问题处理

    近期部署在生产环境的应用突然无法访问,查看应用日志发现无法获取数据库连接. SystemErr R Caused by: oracle.net.ns.NetException: The Network ...

  9. Android 性能优化（9）网络优化（ 5）Optimizing Server-Initiated Network Use

    Optimizing Server-Initiated Network Use This lesson teaches you to Send Server Updates with GCM Netw ...

  10. pip安装itchat模块成功后annocanda中No module named 'itchat'

    在cmd中pip install itchat 成功后在annocanda中却出现了下面的情况: 经过查找网上各种查询,原来pip默认是把东西安装在系统python环境中,即C:\Python27\L ...