Share via

Guida introduttiva: Aggiunta di controlli Repeater

  • Articolo

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Scopri come usare il controllo Repeater nelle app di Windows Store scritte in JavaScript per visualizzare un set di dati discreto come markup HTML ripetuto.

Anche se simile al controllo ListView, in quanto consente di associare dati al codice HTML della tua app, il controllo Repeater presenta numerose differenze. È ideale per insiemi di dati più piccoli, finiti e statici che richiedono minore funzionalità per gli utenti. Se viene connesso a un insieme di dati dinamico, il controllo Repeater è più adatto a modifiche di minore entità e meno frequenti controllate dallo sviluppatore. Puoi inoltre applicare facilmente stili al controllo Repeater con un piccolo insieme di regole CSS (Cascading Style Sheet).

Prerequisiti

Creare un nuovo progetto con il modello Applicazione vuota

  1. Avvia Microsoft Visual Studio Express 2013 per Windows.

  2. Nella scheda Pagina iniziale fai clic su Nuovo progetto. Verrà aperta la finestra di dialogo Nuovo progetto.

  3. Nel riquadro Installato espandi Modelli e JavaScript e seleziona il tipo di modello App di Windows Store. I modelli di progetto disponibili per JavaScript vengono visualizzati nel riquadro centrale della finestra di dialogo.

  4. Nel riquadro centrale scegli il modello di progetto Applicazione vuota.

  5. Nella casella di testo Nome inserisci Demo repeater.

  6. Fai clic su OK per creare il progetto.

Aggiungere la definizione del controllo repeater al progetto

Il controllo Repeater può essere definito in modo dichiarativo in una pagina HTML o in fase di esecuzione tramite codice JavaScript caricato con la pagina. In questo esempio il controllo repeater viene creato in modo dichiarativo nel markup HTML.

  1. Apri default.html e inserisci il codice HTML seguente all'interno dell'elemento <body>. L'hub deve essere un figlio diretto dell'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. In default.html all'interno dei tag <head> aggiungi i tag <script> seguenti.

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

  3. In Esplora soluzioni fai clic con il pulsante destro del mouse sulla cartella js e quindi scegli Aggiungi > Nuovo file JavaScript. Nella finestra di dialogo Aggiungi nuovo elemento assegna il nome "books.js" al nuovo file JavaScript e quindi fai clic su Aggiungi.

  4. Apri il file books.js (js/books.js) e aggiungi il codice JavaScript seguente.

    (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. Premi F5 per eseguire l'esempio.

    Nell'app sono visualizzate tre sezioni, ognuna contenente dati del controllo List esposti dalla proprietà Books.data.

In questo esempio il frammento HTML da ripetere è contenuto nel controllo Repeater dichiarato nel markup HTML. Puoi anche usare un controllo WinJS.Binding.Template per definire il frammento HTML ripetuto. Il controllo Repeater dell'esempio presenta gli elementi contenuti nell'elenco Books.data, in cui ogni elementi dell'oggetto List viene visualizzato nel proprio frammento HTML.

Riepilogo e passaggi successivi

In questa guida introduttiva hai aggiunto un controllo Repeater con tre frammenti HTML ripetuti, usando una semplice origine dati statica.

Per altre informazioni su come aggiungere o rimuovere dinamicamente dati in un controllo Repeater, vedi l'esempio di controllo Repeater HTML.