如何建立範本函式 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

了解如何建立可為 ListView 產生項目的範本函式。

您必須知道的事

技術

• 使用 JavaScript 的 Windows 市集應用程式
• 適用於 JavaScript 的 Windows Library

先決條件

• 我們假設您可以利用 JavaScript，以 WinJS 控制項建立基本的 Windows 市集應用程式。如需開始使用 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 樹狀目錄的根元素，或是對於完成時將傳回項目根元素的 Promise。
  • 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 項目範本範例