如何创建模板函数(HTML )
03/04/2016
正文内容
[本文适用于创建Windows运行时APP应用程序的Windows 8.x和Windows Phone 8.x开发者。 如果是针对Windows 10开发，请参阅最新文档]
学习如何创建用于为ListView生成项目的模板函数。
需要知道的事情
技术
前提条件
假设您可以使用JavaScript创建使用WinJS控件的基本windows APP应用程序存储APP应用程序。 有关使用WinJS控件的详细信息，请参阅快速入门：添加WinJS控件和样式。
说明
关于步骤1:模板函数
可以创建用于绘制每个列表项的函数，而不是在标记中定义项模板。 绘制函数使用以下参数：
对象元素(item promise，recycledElement ) )。
itemPromise :用于绘制项目的数据的IItemPromise。 使用同步数据源时，IItemPromise通常是完整的； 但是，异步数据源将在将来的某个时间点变得完整。
已恢复元素：上一个项目的DOM。 可以重复使用以显示新内容。 此参数是可选的。
如果使用元素回收，请执行以下操作：
在使用回收的元素作为占位符之前，清除旧项目的信息。 如果普通懒惰猪使用回收，旧项目可能包括旧数据和上次使用时的状态。 请在重用回收元素之前清除或隐藏状态。
例如，如果模板包含照片，并且希望重用img元素，但还没有新的URL，则可能包含旧数据的照片，因此将img不透明度设置为0以隐藏。 如果普通懒猪有新照片的URL，可以更新img元素以将不透明度恢复为1。
如果项目的HTML具有基于项目数据的条件状态，请确保在回收时重置。
回收元素时，尽量不要改变DOM的结构。 如果“recycledElement”不适合重用，则忽略它并从零开始创建新元素，然后回收元素进行垃圾回收。
警告由于ListView可以更改recycledElement的结构，因此在尝试访问子元素之前，请务必测试子元素是否存在。
绘制函数必须返回以下内容之一：
项目DOM树的根元素。
包含以下属性的对象：
element :项的DOM树的根元素或项的根元素在完成时返回的约定。
renderComplete :项目完全呈现时完成的Promise。
步骤2:如何创建简单的渲染函数
下面的示例使用项模板函数获取名为templateFunctionListView的ListView，并显示每个数据项的title、text和picture
App.onactivated=function{
if (args.detail.kind===activation.activation kind.launch ) ) ) ) ) ) ) )。
if (args.detail.previousexecutionstate！==activation.applicationexecutionstate.terminated ) {
//todo : thisapplicationhasbeennewlylaunched.initialize
//your应用程序here。
} else {
//todo : thisapplicationhasbeenreactivatedfromsuspension。
//restore应用程序状态硬件。
}
args.set promise (win js.ui.processall ).then(function ) )。
varlview=document.getelementbyid (templatefunctionlistview ).winControl；
lview.item template=item template function；
()；
}
(；
函数特性模板函数(item promise )。
returnitempromise.then (function (item ) {
var div=document.createelement (' div )；
varimg=document.createelement (' img )；
img.src=item.data.picture；
img.alt=item.data.title；
div.appendchild(img；
varchilddiv=document.createelement (' div )；
var title=document.createelement (' H4 )；
title.innertext=item.data.title；
childdiv.appendchild(title；
var desc=document.createelement (' h6 )；
desc.innerText=item.data.text；
childdiv.appendchild(desc；
div.appendchild(childdiv；
返回Div；
)；
(；
备注
相关主题