如何创建模板函数 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

了解如何创建为 ListView 生成项目的模板函数。

你需要了解的内容

技术

• 使用 JavaScript 的 Windows 应用商店应用
• Windows JavaScript 库

先决条件

• 我们假设你可以创建使用 WinJS 控件的基本 Windows 应用商店应用（采用 JavaScript）。有关如何开始使用 WinJS 控件的说明，请参阅快速入门：添加 WinJS 控件和样式。

说明

步骤 1: 关于模板函数

你可以创建用来呈现每个列表项的函数，而不在标记中定义项模板。呈现函数采用以下这些参数：

object renderItem(itemPromise, recycledElement)

• itemPromise：用于要呈现项的数据的 IItemPromise。使用同步数据源，IItemPromise 通常是完整的；但如果使用异步数据源，则它在未来的某个时间是完整的。

• recycledElement ：来自上一个项的 DOM，可重复用于显示新内容。该参数为可选参数。

  如果你使用元素回收，请执行以下操作：

  • 在将回收的元素用作占位符之前，清除旧项的信息。当你使用回收时，旧项将有可能包含旧数据和它在上次使用时所处的状态。请在重用回收元素之前清除或隐藏状态。

    例如，如果模板中包含一个照片而且你希望重用 img 元素，但是尚且没有新的 URL，请通过将 img 的不透明度设置为 0 来隐藏它，因为它可能包含旧数据中的照片。当你拥有新照片的 URL 时，可以更新 img 元素并将它的不透明度改回到 1。

  • 如果某项的 HTML 拥有基于项数据的条件状态，则请确保在回收时对其进行重置。

  • 回收元素时，请尽量避免更改 DOM 的结构。如果 recycledElement 不适合重新使用，那么请忽略它并从零开始创建一个新元素，且 recycledElement 将被垃圾收集起来。

  警告  ListView 可以更改 recycledElement 的结构，因此请始终在尝试访问子元素之前测试子元素是否存在。

   

呈现函数必须返回以下任一内容：

• 项的 DOM 树的根元素。

• 包含以下属性的一个对象：

  • element：项的 DOM 树的根元素，或完成时将返回项的根元素的承诺。
  • renderComplete：完全呈现项时完成的 Promise。

步骤 2: 如何创建简单的呈现函数

下面的示例检索名为 templateFunctionListView 的 ListView，并使用一个用来显示每个数据项的 title、text 和 picture 的项模板函数来设置该对象的 itemTemplate 属性。

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function () {
                var lView = document.getElementById("templateFunctionListView").winControl;
                lView.itemTemplate = itemTemplateFunction;

            }));

        }
    };

   function itemTemplateFunction(itemPromise) {

       return itemPromise.then(function (item) {
           var div = document.createElement("div");

           var img = document.createElement("img");
           img.src = item.data.picture;
           img.alt = item.data.title;
           div.appendChild(img);

           var childDiv = 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);
           
           return div;
       });
    };

备注

有关更多示例，请参阅 ListView 项模板示例例。

相关主题

ListView 项模板示例