部分代码参考demo----《历史上的今天》。

感谢作者的分享，愿好人一生平安，虽然只有两个页面，但是通过这个示例让我学会了5+中如何动态构建列表并填充数据，非常实用。

html部分：

<body>

        <header class="mui-bar mui-bar-nav">

            <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>

            <h1 class="mui-title">历史上的今天</h1>

        </header>

        <div class="mui-content">

            <ul class="mui-table-view">

                <li class="mui-table-view-divider">

                    <span class="fs14">今天：</span><span class="mui-badge mui-badge-blue" id="curdatestr"></span>

                    <span style="margin-left: 50px;"></span>

                    <span class="fs14">星期：</span><span class="mui-badge mui-badge-red" id="curdateweekstr"></span>

                </li>

                <ul class="mui-table-view" id="TIH_EventList_UL">

                    

                </ul>

            </ul>

        </div>

<pre name="code" class="html"></body>


js脚本:


<script type="text/javascript">

			window.onload = function() {

				mui.init();

				mui.plusReady(function() {

					// for Android back event

					mui.options.maintabid = mui.currentWebview.__uuid__;

					// fill head

					var curDate = new Date();

					fillHeader(curDate);

					// righticon add event

					mui.addEventListenerBySelector("#info", "tap", function() {

						plus.device.vibrate();

					});

					// ajax request data

					getListData(curDate);

				});

			}

			function fillHeader(cdate) {

				mui.html('curdatestr', cdate.toString("yyyy年MM月dd日"));

				mui.html('curdateweekstr', cdate.week());

			}

			function getListData(cdate) {

				if (!mui.constMap.key_historyOnToday) {

					mui.toast("请在app.js中配置KEY!!! ");

					return;

				}

				plus.nativeUI.showWaiting("数据加载中，请稍候...");

				console.log(plus.storage.getLength());

				var existsCache = false;

				for (var i = 0; i < plus.storage.getLength(); i++) {

					var stVal = plus.storage.key(i);

					console.log(stVal.substring(5).length + "========" + cdate.toString().length);

					if (stVal.substring(5) == cdate.toString()) {

						// exists cache date in curdate

						existsCache = true;

						break;

					}

				}

				if (!existsCache) {

					// clear all cache

					plus.storage.clear();

				}

				var stKey = "main:" + cdate;

				var cdata = plus.storage.getItem(stKey);

				if (cdata) {

					console.log("read cache");

					// fill cached data

					cdata = mui.readJson(cdata);

					notifiULList(cdata);

				} else {

					console.log("read real data");

					var url = 'http://japi.juhe.cn/toh/toh?key=' + mui.constMap.key_historyOnToday + 'dtype=json&v=1.0&month=' + cdate.month() + '&day=' + cdate.day();

					mui.sendRequest(url, {}, function(result) {

						if (result.success) {

							var n = result.retval.result;

							notifiULList(n);

							plus.storage.setItem(stKey, mui.writeJson(n));

						} else {

							mui.toast(result.error);

						}

					}, 'json');

				}

			};

			function notifiULList(cdataList) {

				plus.nativeUI.closeWaiting();

				var doc = document,

					fragment = doc.createDocumentFragment(),

					container = doc.getElementById("TIH_EventList_UL");

				mui.each(cdataList, function(i, n) {

					console.info(n.id)

					notifiAndSetLiDetail(fragment, n);

				});

				container.appendChild(fragment);

				mui.addEventListenerBySelector("a.aEvent", "tap", showDetail);

			}

			function notifiAndSetLiDetail(fragment, n) {

				var doc = document,

					li = doc.createElement("li"),

					a = doc.createElement("a"),

					img = doc.createElement("img"),

					div = doc.createElement("div"),

					p = doc.createElement("p");

				li.setAttribute("class", "mui-table-view-cell mui-media");

				console.info(n._id)//明明是_id 接口上说id   坑我

				a.setAttribute("eid", n._id);

				//a.addEventListener("click", showDetail(n.id)); //note:showDetail() has been called every times. i dont know why.

				a.setAttribute("class", "aEvent");

				img.setAttribute("class", "mui-media-object mui-pull-left");

				img.setAttribute("style", "width: 42px; height: 42px;");

				img.setAttribute("src", n.pic.isBlank() ? 'images/logo.png' : n.pic);

				div.setAttribute("class", "mui-media-body");

				div.innerText = n.title;

				p.innerHTML = n.year + "年" + n.month + "月" + n.day + "日" + ", " + n.lunar;

				li.appendChild(a);

				a.appendChild(img);

				a.appendChild(div);

				div.appendChild(p);

				fragment.appendChild(li);

			}

			function showDetail(o) {

				var a = o.target.offsetParent;

				if (a.tagName != 'A') {

					// fix the end of line onclick event, it's return li not a, i dont know why.

					return;

				}

				mui.openWindow({

					id: "detail.html",

					url: "detail.html",

					show: {

						autoShow: false

					},

					extras: {

						eid: a.getAttribute("eid")

					}

				});

			}

		</script>


根据原作者的提示，我找到了聚合数据这个网站，注册后获取了免费试用接口100次的机会，为了让这个app跑起来，真机测试很多次，后来在聚合网站上测试才发现返回的不是id，而是_id，话说我的心碎了，太不专业了吧，接口文档明摆着，你却返回不一致的东西，这不坑人吗。




看来以后还要注意，发现错误， 要大胆质疑，多多实践。
												


											
HTML5+中动态构建列表并填充数据的更多相关文章
	

    
								
  1. jplayer中动态添加列表曲目（js提取request中的list数据作为js参数使用）
		
    jplayer 的播放列表使用如下: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplaye ...
    
		
    2. 
						
  2. datatable动态添加，及填充数据
		
    DataTable tblDatas = new DataTable("Datas"); tblDatas.Columns.Add("ID", Type.Get ...
    
		
    3. 
						
  3. 使用 Razor 生成 HTML5 中的 data- 属性
		
    在 HTML5 中, 可以使用 data- 属性来表示用户数据,这些数据甚至可以是 JSON 格式的数据,对 Web 前端开发带来很大的方便. 在 MVC 的 Razor 中,可以使用匿名对象来生成定 ...
    
		
    4. 
						
  4. python中元组、列表、字典、集合知识
		
    像列表一样处理字符串: 仅需要看字符串的首字符就知道如何处理该字符串的情况也很常见.例如,如果有一个姓与名的列表,您可以使用与列表相同的语法查看名与姓的第一个字符.这种看待字符串的方法叫做分片(sli ...
    
		
    5. 
						
  5. MFC中List控件动态填充数据(LVN_GETDISPINFO)
		
    在使用List控件的过程中,有时候List控件中需要添加大量的数据,如果使用InsertItem填充,会一次性将数据全部添加进List控件中,比较耗时.这里记录下如何动态添加List控件数据. 步骤  ...
    
		
    6. 
						
  6. es6 Object.assign     ECMAScript 6 笔记（六）   ECMAScript 6 笔记（一）    react入门——慕课网笔记    jquery中动态新增的元素节点无法触发事件解决办法   响应式图像   弹窗细节   微信浏览器——返回操作  Float 的那些事    Flex布局   HTML5 data-* 自定义属性   参数传递的四种形式
		
    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
    
		
    7. 
						
  7. 在微信框架模块中，基于Vue&Element前端，通过动态构建投票选项，实现单选、复选的投票操作
		
    最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...
    
		
    8. 
						
  8. Android 实现在Activity中操作刷新另外一个Activity数据列表
		
    做android项目中遇到这样一个问题:有两个acticity,一个显示好友列表,另外一个显示会话列表,现在问题是在会话界面增加一个添加好友功能,添加好友后要求实时的刷新好友列表. 想了想,找了两种方 ...
    
		
    9. 
						
  9. [转载]java向word模板中填充数据（总结）
		
    使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【设计模式】 模式PK：抽象工厂模式VS建造者模式
			
    1.概述 抽象工厂模式实现对产品家族的创建,一个产品家族是这样的一系列产品:具有不同分类维度的产品组合,采用抽象工厂模式则是不需要关心构建过程,只关心什么产品由什么工厂生产即可.而建造者模式则是要求按 ...
    
			
    2. 
						
  2. Bzoj4710 [Jsoi2011]分特产
			
    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 96  Solved: 62[Submit][Status][Discuss] Description  ...
    
			
    3. 
						
  3. Java多线程学习（四）等待/通知（wait/notify）机制
			
    转载请备注地址:https://blog.csdn.net/qq_34337272/article/details/79690279 系列文章传送门: Java多线程学习(一)Java多线程入门 Ja ...
    
			
    4. 
						
  4. LCD 每隔10分钟 自动熄灭 --打开Framebuffer console的时候【转】
			
    转自:http://blog.csdn.net/liujia2100/article/details/9009063 版权声明:本文为博主原创文章,未经博主允许不得转载. 之前移植LCD的时候,一切正 ...
    
			
    5. 
						
  5. java===java基础学习（5）---文件读取，写入操作
			
    文件的写入读取有很多方法,今天学到的是Scanner和PrintWriter 文件读取 Scanner in = new Scanner(Paths.get("file.txt") ...
    
			
    6. 
						
  6. python写一段脚本代码自动完成输入（目录下的所有）文件的数据替换（修改数据和替换数据都是输入的）【转】
			
    转自:http://blog.csdn.net/lixiaojie1012/article/details/23628129 初次尝试python语言,感觉用着真舒服,简单明了,库函数一调用就OK了  ...
    
			
    7. 
						
  7. JAVA常见的集合类
			
    关系的介绍: Set(集):集合中的元素不按特定方式排序,并且没有重复对象.他的有些实现类能对集合中的对象按特定方式排序. List(列表):集合中的元素按索引位置排序,可以有重复对象,允许按照对象在 ...
    
			
    8. 
						
  8. ASPxCheckBoxList控件获取selected项的text和value的方法
			
    设ASPxCheckBoxList的ClientInstanceName为list_ var needtext; for (var i = 0; i < list_.GetSelectedIte ...
    
			
    9. 
						
  9. [New learn] 设计模式思考
			
    本文是对上文[New learn] 设计模式的思考总结 1.大框架 无论应用使用多少种设计模式和技巧,此模式都是应用的大框架.下图为本项目的基本架构图: 1.上图中大框架为经典的MVC模式. 2.Co ...
    
			
    10. 
						
  10. idea+spring+springmvc+mybatis+mybatis+maven
			
    使用SSM(Spring,SpringMVC和Mybatis) 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johns ...
    
			
    11.