Windows 市集應用程式實作手冊 - 使用 JavaScript : Lab 01

發行項
06/12/2014

實驗 1 : 創建 Windows 8 應用程式

概述

Contoso 食譜提供一系列實際動手做的練習，期使您能完全浸淫在 Windows 8 應用程式開發作業中。透過本系列練習，您將能夠創建一份漂亮的、功能強大的、實用的應用程式，使用一些 Windows 8 新開發出來的重要功能。完成本系列練習，您將學會如何建立一份具有某些 Windows 市集關鍵特色的偉大作品，包括：

運用 Windows 8 特色控制項（例如 ListView 、 AppBar 、和 SemanticZoom ）的使用者體驗。
提供您適當處理各種顯示尺寸、貼齊、和不同方向的使用者體驗。
透過設定、搜尋、和分享之合約訂定來整合 Windows 8 常用工具列。
處理生命週期和應用程式模型事件、適當地儲存和恢復狀態、以及漫遊於各種設定，以便讓使用者可以在各種任務和設備器具之間無縫地移動。
與現代化硬體設備進行無縫整合，以便執行像「圖片和視訊拍攝」之類的功能
透過次要磚釘選、通知和徽章，讓您的應用程式內容保持在活躍狀態，隨時呈現給使用者。
與 Windows 市集的 API 整合在一起，方便試用和應用程式內購買。

在本系列的第一個實驗中，您將使用 HTML 和 JavaScript 來創建應用程式、執行瀏覽（ navigation ）、從具象狀態傳輸（ REST ）服務下載資料、和使用資料綁定（ data binding ）將資料連接到控制項。

目標

本實驗將引導您如何：

使用 Microsoft Visual Studio 2012 範本來創建新的 Windows 8 應用程式。
了解專案的結構。
提供「磚」和其他元素的客製化圖像來為應用程式製作品牌標記。
透過 WinJS.xhr 使用 XMLHttpRequest 物件，從 REST 服務中來檢索食譜資料。
運用該資料和將資料綁定到 ListView 控制項。
使用資料範本來客製化 ListView 控制項呈現資料的方式。
修改 Visual Studio 所生成的程式碼和標記，以便客製化您的應用程式使用者介面。

系統需求

要完成本實驗，您必須擁有下列東西：

Microsoft Windows 8
Microsoft Visual Studio 2012 （任何版本均可行，包括 Visual Studio 2012 Express for Windows 8 ）

設定

為了讓您的電腦能進行本實驗，您必須先執行下列步驟：

安裝 Microsoft Windows 8 。
安裝 Microsoft Visual Studio 2012 。

練習

本動手做實驗室包含下列練習：

創建一個 Windows 8 應用程式
載入食譜資料
客製化使用者介面

完成本實驗，估計需要費時： 40 到 60 分鐘。

練習 1 ：創建一個 Windows 8 應用程式

在第一個練習裡，您將使用 Visual Studio （內部包含有 JavaScript Windows 市集格線應用程式專案）來創建一個新的解決方案。然後，檢查 Visual Studio 剛生成的檔案，做一些簡單的修改，以便客製化此應用程式的使用者介面。

任務 1 - 創建專案

第一步創建一個新的專案，其內容包含構成 Contoso 食譜應用程式的程式碼和資源，並且觀察 Visual Studio 在此專案內包括了哪些東西。

啟動 Visual Studio，使用檔案 > 新增 > 專案命令來創建命名為「 ContosoCookbook 」的新 JavaScript 專案。務必從 JavaScript 範本清單中選擇 Windows 市集，並從範本類型清單中選擇格線應用程式，如圖 1 所示。

圖 1
創建 ContosoCookbook 專案
從偵錯選單中選擇開始偵錯（或直接按壓 F5 ）來啟動偵錯器裡的應用程式。您將看見如圖 2 所顯示的畫面。這是應用程式的首頁或起始頁面。

圖 2
Contoso 食譜的起始頁面
花幾分鐘時間玩一玩此應用程式。初學者可以使用滑鼠（或手指，如果您的電腦有觸控螢幕的話）來水平捲動畫面。

備註：水平捲軸是由 ListView 控制項所提供。如果您覺得好奇，想多了解內情，可以打開 pages\groupedItems 資料夾裡的 groupedItems.html ，並在頁面底部附近尋找帶有 data-win-control=“WinJS.UI.ListView” 屬性的 DIV 元素。沒有這個屬性，它只不過是一個普通的 DIV ；有了這個屬性，它就變成了支持資料綁定和範本化的 ListView 控制項。當您呼叫 WinJS.UI.processAll( ) 時，適用於 JavaScript 的 Windows Library （以 WinJS 命名空間來呈現）會審視 Document Object Model ( DOM )、看見 data-win-control 屬性、並將 DIV 轉換成 ListView 。
碰觸或點擊 ListView 其中一個項目，看看會發生什麼事。舉例來說，點擊註記為 Item Title: 1 這個項目，將會出現如圖 3 所顯示的畫面。這是項目明細頁。

備註：大家都說 Windows 8是一種「觸控優先」的操作系統，其實，它也非常支持傳統的輸入設備或工具，例如滑鼠和手寫筆。從這點出發，當您「碰觸」或「點擊」螢幕上某樣東西時， Windows 8 就會認知您所選擇的工具，也就是說，您不一定需要觸控螢幕才能做事。簡單的滑鼠點擊照樣行得通！

圖 3
項目明細頁
點擊螢幕左上角的返回按鈕（圓圈箭頭），回到此應用程式的起始頁面。
點擊起始頁面左上角下方的 Contoso 食譜的 Group Title: 1 ，來顯示群組明細頁（圖 4）。

圖 4
群組明細頁
切換回 Visual Studio 。（如果您使用觸控螢幕，只要從螢幕的左邊邊緣往右邊刷就行；如果您比較喜歡使用鍵盤，請按壓視窗鍵 + D或 Alt + Tab 。）然後，從偵錯選單中選擇停止偵錯來停止此應用程式。

任務 2 – 熟悉此專案

在 Visual Studio產生此專案之後，很顯然，您得到許多免費的服務。具體而言，它給了您幾個 HTML 頁面加上 CSS 和 JavaScript 、航行於頁面之間的邏輯和使用者介面、和樣本資料資源。為了執行 Contoso 食譜，我們將以 Visual Studio 所生成的專案為基礎往上建造。但是，首先讓我們先花幾分鐘時間熟悉此專案的結構和 Visual Studio 所創建的資產。

在方案總管視窗裡，查看一下 pages 資料夾，您將發現三個子資料夾，每一個對應到此應用程式其中的一個頁面：
- groupedItems ，其內容包含了此應用程式的起始頁面之原始碼檔案。
- itemDetail ，其內容包含了項目明細頁的原始碼檔案。
- groupDetail ，其內容包含了群組明細頁的原始碼檔案。
除了 pages 資料夾內的這三個頁面之外，此專案還包含了一個命名為 default.html 的頁面，用以承載其他頁面。打開 default.html 和檢查在 BODY 元素內的 DIV，它定義了其他頁面被顯示的內容區域。

備註： BODY 元素包含已被註解掉的第二個 DIV 。此 DIV 的 ID 是 ”AppBar” ，代表著一個包含有按鈕或「命令」的應用程式欄，以便讓使用者能在此應用程式內執行一些平常的活動。在隨後的實驗裡，您將刪除此 DIV 被註解的標籤並且為它加上命令。
檢查此專案的 js 資料夾之內容。底下是這些檔案的快速摘要：
- data.js，其內容包含了綁定到控制項的樣本資料和程式碼。
- data.js，其內容包含了綁定到控制項的樣本資料和程式碼。
- navigator.js，其內容包含了瀏覽的輔助函式。
查看一下此專案的 images 資料夾，在這兒，您將發現被用來為此應用程式建立品牌的影像資產。

任務 3 – 客製化起始頁面

目前，此專案名稱 “ContosoCookbook” 出現在起始頁面的上方。讓我們將它修改為「 Contoso Cookbook 」。

在 Visual Studio 內，打開 groupedItems.html 。
找到 SPAN 元素，其類別（ class ）是 “pagetitle” ，並將「 ContosoCookbook 」變更為「 Contoso Cookbook 」，如下所示。

HTML
<span class=“pagetitle”>Contoso Cookbook</span>
按壓 F5 來啟動偵錯器內的應用程式，並確認在起始頁面上方的標題文字已經變更（圖5 ）。

圖 5
修改後的起始頁面
返回 Visual Studio 並使用停止偵錯命令來關閉此應用程式。

任務 4 – 客製化品牌

如果您現在進入 Windows 8 的開始畫面，您將看見 “ContosoCookbook” 磚。此磚是應用程式的主磚（ primary tile ），創建於應用程式被安裝並由 Visual Studio 第一次啟動時。磚上的影像來自 images 資料夾裡的 logo.png。在這個任務裡，您將以更合適的標誌來替換 Visual Studio 所生成的食譜應用程式標誌。同時，您也將更換 images 資料夾裡的其他 PNG 檔案，以便為此應用程式創建獨特的品牌形象，並修改完成此應用程式的清單。

在 Windows 8 的開始畫面，用鼠標右鍵單擊 ContosoCookbook 磚（或用手指將它向下拖半英吋左右，然後再放開，以便選擇此磚），接著，在此應用程式欄內，選擇解除安裝，來卸載此應用程式和刪除此磚。
返回 Visual Studio ，並用鼠標右鍵單擊 images 資料夾。然後，使用加入 > 現有項目命令，從實驗起始材料的 Images 資料夾中匯入 Logo.png 、 SmallLogo.png 、 SplashScreen.png 、 StoreLogo.png 、和 WideLogo.png 。在出現提示時，允許 Visual Studio 改寫相同名稱的現有檔案。
在方案總管中，雙擊 package.appxmanifest ，來打開應用程式的清單。

備註：應用程式的清單包含與此應用程式有關的中繼資料（ metadata ），它們被嵌入於您所建立的每一個應用程式裡。在執行時，此清單會告訴 Windows 8 所有與此應用程式有關的事物，包括此應用程式的名稱、發布者、和宣告此應用程式所需要的功能。這些功能包括存取運用網路攝影鏡頭、麥克風、網際網路、和部份的檔案系統（具體而言，例如，使用者的文件、音樂、和視訊庫。
變更此應用程式的顯示名稱和描述為「 Contoso 食譜」如圖 6 所示。並且在 Wide logo 對話框內輸入 “images\widelogo.png” ，以便放大此應用程式的磚面。

圖 6
改變清單裡的品牌造形
按壓 F5 來啟動此應用程式。
仔細觀察應用程式的啟動，起始畫面（在應用程式載入時，短暫顯示出來的畫面）是否不同於以往？
到 Windows 8 的開始畫面，確認像這樣子的磚出現在畫面上。

圖 7
新的應用程式磚

備註：如果您比較喜歡正方形的磚，請用鼠標右鍵單擊寬磚（或在觸控螢幕上，將磚塊稍微拖下來一點，然後放開），然後，在應用程式欄內，點擊縮小。
返回 Visual Studio ，並停止偵錯。

練習 2 ：載入食譜資料

此專案已經準備了一些樣本資料，但是您將以自己的資料來替換它們。在練習 2 ，您將以真實的食譜資料來替換這些樣本資料，並完成食譜的影像。

任務 1 – 匯入食譜資料

第一個任務是匯入食譜資料和影像。

在 ContosoCookbook 專案內創建一個命名為「 data 」的新資料夾。其作法是用鼠標右鍵單擊方案總管裡的專案，並選擇加入 > 新增資料夾。
用鼠標右鍵單擊資料資料夾，使用加入 > 現有項目命令從起始材料的 Data 資料夾中匯入 Recipes.txt 。

備註：如果您花一點時間觀察 Recipes.txt 的內容，您將看見它包含了一些以 JavaScript Object Notation ( JSON ) 格式來編碼的食譜和食譜群組資料。
從起始材料的 Images 資料夾裡複製那些命名為 chinese 、 french 、 german 、 indian 、 italian 、和 mexican 的資料夾（以及它們的內容）到專案的 images 資料夾。務必將它們擺在 images 資料夾裡，因為 Recipes.txt 裡的影像路徑認定它們就是被擺放在這兒。

備註：有一個簡單的方法來匯入這些資料夾，那就是，將它們從 Windows 8 的檔案總管裡拖出來，擺放到方案總管的 images 資料夾內。

任務 2 – 載入食譜資料

下一個步驟是以能夠載入食譜資料的程式碼來替換 data.js 裡的樣本資料（那些 Visual Studio 已經擺放在專案 js 資料夾裡的東西）。

打開 data.js ，找出以 //TODO: 將這項資料取代成您的實際資料。為開端的行列。
註解或刪除在 TODO 陳述式下面的 generateSampleData().forEach 迴圈。
以這些陳述式來替換您剛剛刪除的 forEach 迴圈。

JavaScript
WinJS.xhr({url: “data/Recipes.txt”}).then(function (xhr) {
var items = JSON.parse(xhr.responseText);
// Add the items to the WinJS.Binding.List
items.forEach(function (item) {
list.push(item);
});
});

備註：您剛剛加入的程式碼使用了適用於 JavaScript 的 Windows Library 的 WinJS.xhr 函式，以便載入您在前一個任務中所輸入的 Recipes.txt 文件。 Recipes.txt 裡的影像網址指的是專案 images 資料夾裡的影像。如果您喜歡，也可以從 Microsoft Azure 下載食譜資料，方法是將您傳給 WinJS.xhr 的 URL 變更為 http://contosorecipes8.blob.core.windows.net/AzureRecipes 。在這種情況下，食譜資料和影像將從雲端下載，而不是來自本地資源。如果您決定走這個路線，您可以從專案裡刪除 Recipes.txt 。然而，務必留下 images 資料夾，因為它包含了 150 x 150 像素的食譜影像，您將使用它們在實驗 6 裡創建次要磚。次要磚的影像必須來自本地資源，無法遠端載入。

即使您使用 XMLHttpRequest ，在 Windows 8 應用程式中您也不用擔心跨來源限制（ cross-origin restrictions ）。縱使目標物處於不同的網域，要調用它們，照樣很容易！

任務 3 – 測試結果

現在應該是運作此應用程式的時候了，我們也可以藉此觀察 Contoso 食譜如何產生變化。

請按壓 F5 來偵錯此應用程式，並驗證起始頁面看起來像這個樣子。

圖 8
食譜的起始頁面
返回 Visual Studio 並停止偵錯。

練習 3 ：客製化使用者介面

您有沒有注意到 “undefined” 這個字出現在每一份食譜起始頁面的底部？這是因為 groupedItems.html 包含了一個資料範本，它將食譜配方的屬性綁定到呈現食譜的 ListView 控制項上。每一個項目範本是一個 HTML 片段，由它來告訴控制項如何呈現每一個項目所綁定的資料。 Visual Studio 所提供的預設項目範本會將此項目底部的文字鏈接到以食物性質命名的副標題（ subtitle ）上，但是該副標題屬性不存在於此應用程式所載入的食譜資料中。

在這個練習裡，您將修改起始頁面、項目明細頁、和群組明細頁，以使 Contoso 食譜的外觀看起來更精緻。

任務 1 – 修改起始頁面

讓我們首先修改起始頁面，以便改進食譜項目的外觀。

打開 groupedItems.html 。找到類別（ class ）是 “itemtemplate” 的 DIV 元素，並刪除綁定文字內容（ textContent ）到副標題屬性的 H6 元素。
在您剛剛刪除的那一行列上面，找到 H4 元素，將 “textContent: title” 變更為 “textContent: shortTitle” 。
現在，讓我們修改 Visual Studio 所生成的 CSS 樣式，減少每一個項目底部（食物標題所出現的半透明黑色對話框）所疊加的高度。在這裡，我們也將一起修改食譜的面積尺寸，以便保持影像的縱橫比。首先，請打開 groupedItems.css 和變更其 -ms-grid-rows 、高度和寬度屬性，如下所顯示。

CSS
.groupeditemspage .groupeditemslist .item {
     -ms-grid-columns: 1fr;
     -ms-grid-rows: 1fr 48px;
     display: -ms-grid; height: 240px;
     width: 320px; }
在 groupedItems.css 內向下一點點，修改其 -ms-grid-rows 屬性。

CSS
.groupeditemspage .groupeditemslist .item .item-overlay {
-ms-grid-row: 2;
-ms-grid-rows: 1fr 1px;
display: -ms-grid;
padding: 6px 15px 2px 15px;
}
現在，請按壓 F5 ，來運作此應用程式。請確認起始頁面的食譜項目看起來就像這兒所顯示的樣子。

圖 9
新的、改進後的起始頁面
返回 Visual Studio 並停止偵錯。

任務 2 – 修改群組明細頁

您已修改完畢起始頁面，改進了此應用程式的外觀，但您仍然需要修改群組明細頁。在這個任務裡，您將修改該頁面，以使群組明細看起來更美觀。

重新啟動應用程式，並點擊畫面左上角的中國菜（Chinese），以便進入到顯示中國菜食譜的群組明細頁。觀察一下，「未定義」（ undefined ）這個字就出現在中國菜標識影像的上方和食譜「磚」裡面。就像以前，此預設範本也正在尋找一些不在我們的資料模型內的屬性。
返回 Visual Studio 並停止偵錯。
打開 groupDetail.html ，找到類別（ class ）為 “headertemplate” 的 DIV 元素，刪除類別為 “group-subtitle” 的 H2 元素。
現在，到頁面的右半邊去尋找定義食譜外觀縮圖的項目範本 — 此 DIV 的類別（ class ）是 “itemtemplate” — 並刪除綁定到副標題（ subtitle ）去的 H6 元素，也一併刪除跟在副標題元素（我們剛剛刪除掉）後面的 H4 元素（綁定到描述（ description ））。在剩下來的 H4 元素內，變更 “textContent: title” 為 “textContent: shortTitle” ，以便讓此項目範本看起來像這個樣子。

HTML
<div class=“itemtemplate” data-win-control=“WinJS.Binding.Template”>
       <img class=“item-image” src=“#” data-win-bind=“src: backgroundImage; alt: title” />
       <div class=“item-info”>
               <h4 class=“item-title” data-win-bind=“textContent: shortTitle”></h4>
       </div>
</div>
現在，將下列陳述式加在您剛剛刪除的地方，也就是 H4 元素的後面和關閉的 DIV 元素前面。

HTML
<h4 class=“item-subtitle”>
Preparation time: <span data-win-bind=“textContent: preptime”></span>
minutes
</h4>

備註： preptime 是應用程式載入的食譜配方屬性當中的一個名稱，用來說明每一頁面食譜縮圖的準備時間等訊息。請注意， data-win-bind 屬性是用來綁定 SPAN 元素的文字內容（ textContent ）屬性到食譜配方的 preptime 屬性。
打開 groupDetail.css ，變更 CSS 類別高度到 “320px” 以下，以保持顯示在頁面左邊的群組影像之縱橫比。

CSS
.groupdetailpage .itemslist .win-groupheader .group-image {
   -ms-grid-row: 2;
   background-color: rgba(147, 149, 152, 1);
   height: 320px;
   margin: 0;
   margin-bottom: 20px;
   width: 480px;
}
仍然在 groupDetail.css 裡，修改 .groupdetailpage .itemslist .item類別（ class ）的 -ms-grid-columns 和寬度（ width ）之屬性，如以下所顯示。這可以將食譜項目擺得更靠近一些，並允許食譜影像保持它們原始的縱橫比。

CSS
.groupdetailpage .itemslist .item {
   -ms-grid-columns: 147px 1fr;
   -ms-grid-rows: 1fr;
   display: -ms-grid;
   height: 110px;
   width: 360px;
}
啟動應用程式並再度點擊中國菜（Chinese）。驗證您的群組明細頁（ group-detail page ）應該酷似底下這個畫面。

圖 10
修改後的群組明細頁（ group-detail page ）
返回 Visual Studio 並停止偵錯。

任務 3 – 修改項目明細頁

為應用程式製作基本使用者介面的最後工作是修改項目明細頁，以便讓食譜能呈現出更多的資訊，包括用法說明和食材原料。

執行（ Run ）此應用程式，點擊食譜其中一個項目。很顯然，我們必須在項目明細頁上做一些事。
返回 Visual Studio 並停止偵錯。
打開 itemDetail.html 。找到裝飾著 role=“main” 屬性的 DIV 元素，修改它，使它看起來像這個樣子。

HTML
<div class=“content” aria-label=“Main content” role=“main”>
<article>
    <div>
      <header>
        <h2 class=“item-title”></h2>
      </header>
      <img class=“item-image” src=“#” />
      <h2>Preparation time: <span class=“item-subtitle”></span> minutes
      </h2>
</div>
<div class=“ingredients”>
      <h2>Ingredients</h2>
      <div class=“item-ingredients”></div>
</div>
<div class=“directions”>
      <h2>Directions</h2>
      <h2 class=“item-directions”></h2>
    </div>
</article>
</div>
項目明細頁不使用聲明性資料綁定；它僅僅指派食譜配方屬性給程式碼後置（ code-behind ）文件中的 HTML 元素。為此目的，請打開 itemDetail.js ，並以這兒所顯示的語詞來替換其 ready 函式。

JavaScript
ready: function (element, options) {
var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector(“.titlearea .pagetitle”).textContent = item.group.title;
element.querySelector(“article .item-title”).textContent = item.title;
element.querySelector(“article .item-subtitle”).textContent = item.preptime;
element.querySelector(“article .item-image”).src = item.backgroundImage;
element.querySelector(“article .item-image”).alt = item.shortTitle;

// Display ingredients list
var ingredients = element.querySelector(“article .item-ingredients”);
for (var i = 0; i < item.ingredients.length; i++) {
var ingredient = document.createElement(“h2”);
ingredient.textContent = item.ingredients[i];
ingredient.className = “ingredient”;
ingredients.appendChild(ingredient);
}

// Display cooking directions
element.querySelector(“article .item-directions”).textContent = item.directions;
element.querySelector(“.content”).focus();
}
為了完成修改，您還需要修改此頁的 CSS 。請打開 itemDetail.css ，並在 .itemdetailpage .content article header .item-subtitle 類別（ class ）後面加上下列陳述式。

CSS
.itemdetailpage .content article .ingredients {
-ms-grid-column: 3;
margin-left: 40px;
}

.itemdetailpage .content article .ingredients .item-ingredients {
margin-top: 20px;
}

.itemdetailpage .content article .ingredients .item-ingredients .ingredient {
padding-bottom: 12px;
font-size: 20px;
}

.itemdetailpage .content article .directions {
-ms-grid-column: 5;
margin-left: 40px;
}

.itemdetailpage .content article .directions .item-directions {
margin-top: 20px;
font-size: 20px;
}
在您關閉 itemDetail.css 之前，請在靠近「文件」上方找出第一個 .itemdetailpage .content article 類別（ class ），並以底下這個陳述式來替換它。

CSS
.itemdetailpage .content article {
/* Define a multi-column, horizontally scrolling article by default. */
column-fill: auto;
column-gap: 80px;
column-width: 480px;
height: calc(100% - 183px);
margin-left: 120px;
margin-top: 133px;
display: -ms-grid;
-ms-grid-columns: 400px 40px 360px 40px 1fr;
}

備註：這個修改刪除了固定寬度，使得食譜資料能夠水平展開來填滿頁面。它也宣告了5-欄（ column ）式格線（ grid ）來配置 DOM 元素。格線（ grid ）配置在http://dev.w3.org/csswg/css3-grid-align/ 的 CSS3格線（grid）配置規範中有所描述。如果您檢查在步驟 5 所添加的 CSS ，您將看見我們使用 -ms-grid-column 來定位 DIV 元素，它在格線（ grid ）的第 3欄（ column ）顯示配方原料，並在第 5欄說明食用方法。換句話說，我們使用格線（grid）配置來分割畫面，使成為許多欄（ column ）和將 HTML 內容定位在那些欄（ column ）裡面。
最後，請找出 .itemdetailpage .content article .item-image 類別（ class ），並刪除高度（ height ）屬性，以便讓它看起來像這樣子。

CSS
.itemdetailpage .content article .item-image {
margin-bottom: 3px;
width: 400px;
}
現在，再度執行此應用程式。點擊 Fried Dumpling ，您的項目明細頁應該看起來像圖 11

圖 11
修改後的項目明細頁（ item-detail page ）
返回 Visual Studio 並停止偵錯。

摘要

在本實驗，您使用 Visual Studio 裡的格線應用程式專案來創建一個新的 Windows 8 應用程式。然後，您以真實的食材資料來替換樣本資料、以更適合此應用程式的品牌資產來替換預設品牌、並且修改 Visual Studio 所提供的一些 HTML 、 CSS 、和 JavaScript 來客製化使用者介面。此外，您還第一手觀察了專案是如何建構起來的，以及各零組件是如何結合在一起的。

您還學習如何使用 WinJS.xhr 函式從本地或遠距資料來源載入資料、如何綁定資料到 ListView 控制項以使資料項目呈現在螢幕上、和如何使用資料範本來指定資料項目應如何呈現為 HTML 。透過資料範本和相對應的 CSS 之修改，您客製化了食譜和食譜群組呈現給使用者的方式。

這是很好的開始，但是，要將 Contoso 食譜做得更好，我們還必須做很多事。且讓我們繼續實驗 2 的旅程！

繼續下一個實驗

Share via