需要启个服务

需引入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 Vue实例中的数据，事件和方法

    上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...

  2. 为了一个句号，写了好多行的代码——值！(html 表单的处理)

    个人信息表 <span style="font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  3. robotframework - User key 操作

    一.用户关键字操作思路 a.创建model1资源 b.在model下创建用户关键字 - 循环 c.测试套件下创建test_case/case2 & 用户关键字 d.测试套件中导入Resourc ...

  4. 乐搏讲自动化测试-Python语言常识及前景（3）

    相信小伙伴们都知道,随着软件测试行业的发展和进步自动化测试已经成为必然.在竞争日益激烈的市场环境中也是你升职加薪的利器. 所以,小编决定从今天起!将要系统.连续.高质量的持续更新「整套自动化测试」文章 ...

  5. $Hdu1381\ Crazy\ Search$

    前置芝士 :string 的 基本用法 string s = "hello world" ; string tmp(s,0,5) ; cout << tmp <& ...

  6. 实数类型c++

    数据类型 定义标识符 数值范围 占字节数 有效位数 单精度浮点数 float -3.4E+38-3.4E+38 4(32位) 6-7位 双精度浮点数 double -1.7E+308-1.7E+308 ...

  7. 数学+DP Codeforces Round #304 (Div. 2) D. Soldier and Number Game

    题目传送门 /* 题意:这题就是求b+1到a的因子个数和. 数学+DP:a[i]保存i的最小因子,dp[i] = dp[i/a[i]] +1;再来一个前缀和 */ /***************** ...

  8. Deepfakes教程及各个换脸软件下载

    源:https://blog.csdn.net/koest/article/details/80720078 Deepfakes目前用于深度换脸的程序基本都是用python编程语言基于tensorfl ...

  9. python生成excel文件

    2018-04-1919:04:25 测试代码如下: import openpyxl import datetime wb = openpyxl.Workbook() ws = wb.active w ...

  10. Memcached通信协议

    英文水平很烂,做梦都想着能把英语学习,可以使用一口流利的英文和洋鬼子交流,顺便忽悠下自己的同胞.没有地方学习英语,看还可以,网上有很多关于计算机的英文文献,写还行,说就完全不可能了.在以后的工作中慢慢 ...