需要启个服务

需引入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 ...