Inicio rápido: Agregar controles de repetición

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Aprende a usar el control Repeater en aplicaciones de la Tienda Windows con JavaScript, control que muestra un conjunto discreto de datos como un marcado HTML repetitivo.

El control Repeater, si bien parecido al control ListView en el sentido de que permite enlazar datos al código HTML de tu aplicación, es diferente en algunos aspectos. Resulta perfecto para conjuntos de datos pequeños, finitos y estáticos que precisan de menos funcionalidad para el usuario. Si se conecta a un conjunto de datos dinámico, Repeater es la mejor opción para cambios pequeños y poco frecuentes que están bajo control del desarrollador. Es más, se puede aplicar estilo fácilmente al control Repeater con un pequeño conjunto de reglas de hojas de estilo CSS.

Requisitos previos

Crear un proyecto usando la plantilla Aplicación vacía

  1. Abre Microsoft Visual Studio Express 2013 para Windows.

  2. En la pestaña Página de inicio, haz clic en Nuevo proyecto. Se abre el cuadro de diálogo Nuevo proyecto.

  3. En el panel Instalado, expande Plantillas y JavaScript, y haz clic en el tipo de plantilla Aplicación de la Tienda Windows. Las plantillas de proyecto disponibles para JavaScript se muestran en panel central del cuadro de diálogo.

  4. En el panel central, selecciona la plantilla de proyecto Aplicación vacía.

  5. En el cuadro de texto Nombre, escribe Repeater demo.

  6. Haz clic en Aceptar para crear el proyecto.

Agregar la definición de la repetición al proyecto

El control Repeater se puede definir de manera declarativa en una página HTML o en tiempo de ejecución mediante JavaScript cargado con la página. En este ejemplo la repetición se crea mediante declaración en el formato HTML.

  1. Abre default.html e inserta el siguiente HTML en el elemento <body>. El concentrador debería ser un elemento secundario directo del elemento <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>

  2. En default.html, dentro de las etiquetas <head>, agrega las siguientes etiquetas <script> .

    <script src="/js/books.js"></script>

  3. En el Explorador de soluciones, haz clic con el botón secundario en la carpeta js y haz clic en Agregar > Nuevo archivo JavaScript. En el cuadro de diálogo Agregar nuevo elemento, asigna el nombre "books.js" al nuevo archivo JavaScript y haz clic en Agregar.

  4. Abre el archivo books.js (js/books.js) y agrega el siguiente código 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 });

})();

  5. Presiona F5 para ejecutar la muestra.

    La aplicación muestra tres secciones, cada una de las cuales contiene algunos datos del List expuesto por la propiedad Books.data.

En este ejemplo, el fragmento HTML que se va a repetir está en el control Repeater declarado en el formato HTML. Puedes usar también un WinJS.Binding.Template para definir el fragmento HTML repetitivo. El control Repeater del ejemplo muestra los elementos que figuran en la lista Books.data, donde cada elemento del objeto List aparece en su propio fragmento HTML.

Resumen y siguientes pasos

En este inicio rápido, has agregado un Repeater con tres fragmentos HTML repetidos usando un sencillo origen de datos estático.

Para más información sobre cómo agregar o quitar datos dinámicamente en un control Repeater, consulta Muestra de control Repeater HTML.