快速入门：添加 Repeater 控件

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

了解如何使用 Repeater，它是使用 JavaScript 的 Windows 应用商店应用中的一个控件，用于显示一组离散数据作为重复 HTML 标记。

Repeater 控件尽管在允许你将数据绑定到应用的 HTML 这一点上与 ListView 控件类似，但存在很多差异。它适用于较小、有限、静态的数据集且要求用户提供的功能更少。如果连接到动态数据集，则 Repeater 最适合于由开发人员所控制较小且不频发的更改。而且，可以使用一组较小的级联样式表 (CSS) 规则轻松设置 Repeater 控件的样式。

先决条件

使用 Blank App 模板新建项目

启动 Microsoft Visual Studio Express 2013 for Windows。
在“起始页”选项卡中，单击“新建项目”****。随即将打开“新建项目”对话框。
在“已安装”****窗格中，展开“模板”和“JavaScript”****并单击“Windows 应用商店应用”模板类型。JavaScript 可用的项目模板随即将显示在对话框的中心窗格中。
在中心窗格中，选取“空白应用程序”****项目模板。
在“名称”文本框中，键入“Repeater 演示”****。
单击“确定”可创建项目。

将 Repeater 定义添加到该项目

Repeater 控件既可以声明方式在 HTML 页面中进行定义，也可在运行时使用与此页面一起加载的 JavaScript 进行定义。此示例将使用 HTML 标记以声明方式创建 Repeater。

打开 default.html 并将以下 HTML 插入 <body> 元素中。集线器必须是 <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 标记声明的 Repeater 控件中。（还可以使用 WinJS.Binding.Template 定义重复的 HTML 分段。）示例中的 Repeater 控件提供了 Books.data 列表中包含的项目，其中 List 对象中的每个项目都显示在自己的 HTML 分段中。

摘要和后续步骤

在此快速入门中，已使用简易的静态数据源添加 Repeater 和三个重复的 HTML 分段。

有关如何动态添加数据到 Repeater 控件或删除数据的详细信息，请参阅 HTML Repeater 控件示例。

Last updated on 2016-03-04

通过

快速入门：添加 Repeater 控件

先决条件

摘要和后续步骤

其他资源