需要启个服务

需引入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. 27. FormPanel类的defaults属性

    defaults : Object defaults属性可以包含任意个name/value属性对,这些属性将会被添加到每一个元素中...例如, 为了自动向容器包含的每个Ext.Panel 元素的宽度添 ...

  2. python 操作数据库时遇到的错误

       pymysql.err.ProgrammingError: (1064, "You have an error in your SQL syntax; ch    之前的写法是从文件里 ...

  3. [BZOJ3224/Tyvj1728]普通平衡树

    本篇博客有详细题解,浅谈算法--splay

  4. 429c Leha and Function

    题目 解题报告 F(n, k)是在集合{1, 2, 3, ..., n}中所有的具有k个元素的子集中分别取最小值,相加后的期望. 例如:要求F(4, 2),根据定义有{1, 2}, {1, 3}, { ...

  5. BST二叉查找树转双向链表DoubleLinke

    问题:在不创建任何新的节点的情况下,实现将一颗BST变成有序的双向链表. 分析: 在结构上,如图的一颗BST,每个节点都有left right指针分别指指向左右儿子.结构上和双向链表节点是完全相同的. ...

  6. caffe2：conda路径和权限问题

    在使用conda之后,总是不能直接使用 conda install 命令,需要把codna添加到系统路径,取代默认Python. 在-/.bashrc中,添加 # added by Anaconda2 ...

  7. python爬虫（房天下）

    房天下 import requests res = requests.get('http://esf.sz.fang.com/') #res.text from bs4 import Beautifu ...

  8. MySql （二）入门语句和基本操作

    mysql的入门语句:查看服务器下的库 show databases; 创建库(数据库被创建后它的名字是不可以更改的) create database 数据库名; 2.1.插看当前所在的库 selec ...

  9. Java多线程学习笔记（四）——Thread类中方法介绍

    currentThread():返回代码正在被哪个线程调用. public class CurrentThreadWay { public static void main(String[] args ...

  10. Python的伪造数据库：Faker

    faker 是一个可以让你生成伪造数据的Python包,在软件需求.开发.测试过程中常常需要利用一些假数据来做测试,这种时候就可以使用 Faker 来伪造数据从而用来测试. 一.Faker安装 pip ...