快速入門：新增 Repeater 控制項

發行項
03/04/2016

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

了解如何使用 Repeater，這是使用 JavaScript 的 Windows 市集應用程式中的控制項，可將離散的資料組顯示為重複的 HTML 標記。

Repeater 控制項雖然與 ListView 控制項 (可讓您將資料繫結到應用程式的 HTML) 類似，但有幾個不同的地方。它很適合小型、有限、靜態的資料集，不需要為使用者提供太多功能。如果連接到動態資料集，Repeater 非常適合開發人員控制的非經常性小幅變更。此外，您可以使用少量的階層式樣式表 (CSS) 規則，輕鬆設定 Repeater 控制項的樣式。

先決條件

使用空白應用程式範本建立新專案

啟動 Microsoft Visual Studio Express 2013 for Windows。
在 [起始頁] 索引標籤，按一下 [新增專案]****。隨即開啟 [新增專案] 對話方塊。
在 [已安裝的]**** 窗格中，展開 [範本] 和 [JavaScript]****，然後按一下 [Windows 市集應用程式] 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。
在中央窗格中，挑選 [空白應用程式]**** 專案範本。
在 [名稱] 文字方塊中，輸入 Repeater 示範。
按一下 [確定] 來建立專案。

將 Repeater 定義新增到專案

Repeater 控制項可以在 HTML 頁面中以宣告方式定義，或在執行階段使用隨頁面載入的 JavaScript 定義。這個範例會在 HTML 標記中以宣告方式建立 Repeater。

開啟 default.html，在 <body> 元素內插入下列 HTML。中樞應該是 <body> 元素的直屬子系。

<div id="main-content">
    <h1>Great literature of Ancient Athens</h1>
    <div id="repeater" data-win-control="WinJS.UI.Repeater"
        data-win-options="{ data: Books.data }">
        <section>
            <h2 data-win-bind="textContent: bookTitle"></h2>
            <p><i data-win-bind="textContent: author"></i></p>
            <p data-win-bind="textContent: synopsis"></p>
        </section>
    </div>
</div>

在 default.html 的 <head> 標籤內，新增下列 <script> 標籤。
```
<script src="/js/books.js"></script>
```
在 [方案總管] 中，用滑鼠右鍵按一下 [js]**** 資料夾，然後按一下 [加入] > [新增 JavaScript 檔]。在 [加入新項目] 對話方塊中，將新的 JavaScript 檔案命名為 "books.js"，然後按一下 [加入]。

開啟 books.js 檔案 (js/books.js)，然後新增下列 JavaScript 程式碼。

(function () {
    "use strict";

    // Define a data set as an array of objects.
    var books = [
        {
            bookTitle: "Anabasis",
            author: "Xenophon",
            synopsis: "10,000 Greek mercenaries, lost in Persia, work together to make their way home."
        },
        {
            bookTitle: "History of the Peloponnesian War",
            author: "Thucydides",
            synopsis: "The mighty cities Sparta and Athens war for supremacy over the Hellenes."
        },
        {
            bookTitle: "Antigone",
            author: "Sophocles",
            synopsis: "A young woman defies the king of the city by giving her father a proper burial."
        }
    ];

    // Convert the array into a List object.
    var booksList = new WinJS.Binding.List(books);

    // Expose the list globally in the 'Books' namespace.
    WinJS.Namespace.define("Books",
        { data: booksList });

})();

按 F5 執行範例。

應用程式會顯示三個區段，每個區段包含 Books.data 屬性公開的一些 List 資料。

在這個範例中，要重複的 HTML 片段包含在 HTML 標記宣告的 Repeater 控制項內 (您也可以使用 WinJS.Binding.Template 定義重複的 HTML 片段)。這個範例中的 Repeater 控制項顯示 Books.data 清單中包含的項目，其中每個來自 List 物件的項目都會顯示在自己的 HTML 片段中。

摘要與後續步驟

在這個快速入門中，您使用簡單的靜態資料來源新增含三個重複 HTML 片段的 Repeater。

如需如何從 Repeater 控制項動態新增或移除資料的詳細資訊，請參閱 HTML Repeater 控制項範例。

共用方式為

快速入門：新增 Repeater 控制項

先決條件

摘要與後續步驟

其他資源