Краткое руководство: добавление элементов управления "Повторение"

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В данной статье описывается использование в приложениях Магазина Windows на JavaScript элемента управления Repeater, который отображает набор раздельных данных в виде повторяющейся разметки HTML.

Элемент управления Repeater напоминает ListView, позволяя привязывать данные к коду HTML вашего приложения, но имеет и некоторые отличия. Он идеально подходит для небольших ограниченных статических наборов данных, не подразумевающих множества функциональных возможностей для пользователя. При подключении к динамическому набору данных Repeater подходит для редких незначительных изменений, управляемых разработчиком. Более того, вы легко можете задать стиль элемента управления Repeater с помощью небольшого набора правил каскадных таблиц стилей (CSS).

Необходимые условия

Создание нового проекта с помощью шаблона пустого приложения

Запустите Microsoft Visual Studio Express 2013 для Windows.
На вкладке Start Page (Начальная страница) щелкните New Project (Создать проект). Откроется диалоговое окно New Project (Создание проекта).
На панели Installed (Установлено) разверните узлы Templates (Шаблоны) и JavaScript, а затем выберите шаблон Windows Store app (Приложение Магазина Windows). Шаблоны проектов для JavaScript отображаются на центральной панели диалогового окна.
На центральной панели выберите шаблон Пустое приложение.
В текстовом поле Имя введите Repeater demo.
Чтобы создать проект, нажмите кнопку ОК.

Добавление определения повторителя в проект

Элемент управления Repeater можно определить либо декларативно на HTML-странице, либо во время выполнения JavaScript, загружаемого со страницей. В этом примере повторитель создается декларативно в разметке HTML.

Откройте файл 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>

Добавьте внутри тегов <head> в default.html следующие теги <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.

Приложение отображает три раздела, каждый из которых содержит часть данных объекта, List предоставленного свойством Books.data.

В этом примере повторяемый фрагмент HTML содержится в элементе управления Repeater, объявленном в разметке HTML . (Кроме того, чтобы задать повторение фрагмента HTML, вы можете использовать WinJS.Binding.Template.) Элемент управления Repeater в этом примере представляет элементы из списка Books.data, в котором каждый элемент объекта List отображается с помощью собственного фрагмента HTML.

Краткая сводка и дальнейшие действия

В этом кратком руководстве вы добавили объект Repeater с тремя повторяющимися фрагментами HTML с помощью простого источника статических данных.

Дополнительные сведения о динамическом добавлении и удалении данных в элемент управления Repeater см. в примере элемента управления "Повторение" на HTML.

Поделиться через

Краткое руководство: добавление элементов управления "Повторение"

Необходимые условия

Краткая сводка и дальнейшие действия

Дополнительные ресурсы