Come usare i modelli per associare i dati (HTML)

Articolo
12/11/2015

[ 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 ]

I modelli di Libreria Windows per JavaScript rappresentano un modo conveniente per formattare e visualizzare più istanze di dati. Puoi usarli insieme agli oggetti ListView e FlipView per specificare il modo in cui vuoi visualizzarli. Puoi inoltre usare un modello per associare più istanze di un oggetto dati senza usare una visualizzazione predefinita. Per altre informazioni sull'uso di un modello con un controllo ListView, vedi Guida introduttiva: Aggiunta di un controllo ListView. Per altre informazioni sull'uso di un modello con un controllo FlipView, vedi Aggiunta di controlli FlipView. La procedura seguente illustra come usare un modello con una matrice.

Puoi definire un modello in modo dichiarativo come controllo WinJS e specificarne la struttura interna e lo stile. Sebbene siano dichiarati come elementi DIV, i modelli non vengono elaborati come parte del DOM e non vengono restituiti come parte dei risultati della ricerca DOM. Puoi specificare l'elemento DIV nel quale deve essere visualizzato il modello oppure consentire al metodo render di crearsi un proprio elemento DIV. Questo argomento spiega come usare un modello per associare un numero variabile di oggetti di dati associabili a un elemento DIV. L'utente sceglie il numero di oggetti da visualizzare selezionando un elemento da un elenco a discesa.

Prerequisiti

La lettura dell'argomento Guida introduttiva: Associazione di dati e stili a elementi HTML potrà aiutarti a completare i passaggi della procedura descritta in questo argomento.

Istruzioni

Passaggio 1: Impostazione di un progetto per l'utilizzo di un modello

Per impostare un progetto per l'utilizzo di un modello, segui questi passaggi.

Hh700356.wedge(it-it,WIN.10).gif

Crea un'app di Windows Store vuota in JavaScript e assegnale il nome TemplateExample.
All'interno dell'elemento BODY del file default.html, aggiungi un elemento DIV per il modello e assegna un ID di templateDiv, quindi aggiungi un attributo data-win-control che abbia un valore di "WinJS.Binding.Template", come mostrato qui.
```
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template"></div> 
</body>
```
Torneremo ad aggiungere la struttura interna del modello dopo aver definito l'oggetto dati.

Passaggio 2: Definizione di un oggetto dati e relativa associazione ai campi del modello

Nella funzione con richiamo immediato di default.js dichiara un oggetto che contenga vari campi. In questo caso, viene usato l'oggetto WinJS.Binding.define, che rende associabili tutte le proprietà.


(function () {
    "use strict";

    // Other app code ...

    // Define a Person object with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

})();

Per visualizzare i campi di questo oggetto nel modello, devi usare un elenco i cui elementi corrispondano ai campi dell'oggetto dati, come illustrato qui. Aggiungi il codice seguente ai tag BODY di default.html.

<div id="templateDiv" data-win-control="WinJS.Binding.Template">
    <div class="templateItem" data-win-bind="style.background: color">
        <ol>
            <li><span>Name :</span><span data-win-bind="textContent: name"></span></li>
            <li><span>Birthday:</span><span data-win-bind="textContent: birthday"></span></li>
            <li><span>Pet's name: </span><span data-win-bind="textContent: petname"></span></li>
            <li><span>Dessert: </span><span data-win-bind="textContent: dessert"></span></li>
        </ol>
    </div>
</div>

Sotto il codice del modello in default.html aggiungi un elemento DIV dove deve essere eseguito il rendering del modello.
```
<div id="templateControlRenderTarget"></div>
```

Passaggio 3: Controllo del numero di oggetti visualizzati

Ai fini di questo esempio, creeremo un'istanza di tre oggetti Person e aggiungeremo un elenco a discesa in modo che l'utente possa scegliere il numero di oggetti Person da visualizzare.

Nei tag BODY di deafult.html aggiungi il codice seguente.

<fieldset id="templateControlObject">
    <legend>Pick a name:</legend>
    <select id="templateControlObjectSelector">
        <option value="0">Show one</option>
        <option value="1">Show two</option>
        <option value="2">Show three</option>
    </select>
</fieldset>

Nella funzione anonima con richiamo immediato di default.js crea una matrice con tre oggetti Person.


(function () {
    "use strict";

    // Other app code ...

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({name:"Bob", color:"red", birthday:"2/2/2002", petname:"Spot", dessert:"chocolate cake"}),
        new Person({name:"Sally", color:"green", birthday:"3/3/2003", petname:"Xena", dessert:"cherry pie"}),
        new Person({name:"Fred", color:"blue", birthday:"2/2/2002", petname:"Pablo", dessert:"ice cream"}),
    ];

})();

3. A questo punto aggiungi un listener all'evento di modifica del selettore a discesa. Aggiungi questo codice al gestore per l'evento app.onactivated in default.js.

app.onactivated = function (args) {

    // Other activation code ...

    var selector = document.querySelector("#templateControlObjectSelector");
          selector.addEventListener("change", handleChange, false); 

}

Nel gestore dell'evento di modifica seleziona l'elemento DIV contenente il modello e l'elemento DIV che specifica dove visualizzare i dati e quindi chiama render sul controllo del modello (che puoi ottenere dalla proprietà wincontrol dell'elemento templateDiv). Quando chiami render sul modello, i campi pertinenti dell'oggetto dati vengono associati agli elementi dell'elenco del modello.

function handleChange(evt) {
    var templateElement = document.querySelector("#templateDiv");
    var renderElement = document.querySelector("#templateControlRenderTarget");
    renderElement.innerHTML = "";

    var selected = evt.target.selectedIndex;
    var templateControl = templateElement.winControl;

    while (selected >= 0) {
        templateElement.winControl.render(people[selected--], renderElement); 
    } 
}

A questo punto puoi compilare ed eseguire il debug dell'applicazione. Quando effettui una selezione nell'elenco a discesa, l'app visualizza il numero appropriato di oggetti dati.

Passaggio 4: Abilitazione del rendering per aggiungere un elemento DIV

Non devi fornire alla funzione render un elemento DIV creato da te: se non viene specificato nessun elemento DIV, rendercreerà un nuovo elemento DIV. Devi tuttavia aggiungere il nuovo elemento DIV al DOM. Nota che il valore restituito render è un oggetto WinJS.Promise. Per altre informazioni sulle promesse, vedi Guida introduttiva: Uso delle promesse. Nel metodo done della promessa aggiungi una funzione che, a sua volta, aggiunge il nuovo elemento DIV.

Cambia il blocco while del passaggio precedente nel modo seguente.


    while (selected >= 0) {
        templateElement.winControl.render(people[selected--])
            .done(function (result) {
                 renderElement.appendChild(result);
            });        
    }

Osservazioni

Ecco il codice completo illustrato in questo argomento.

default.html (Windows)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- TemplateExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.html (Windows Phone)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TemplateBinding</title>

    <!-- WinJS references -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- TemplateBinding references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="style.background: color">
            <ol>
                <li>Name: <span data-win-bind="textContent: name"></span></li>
                <li>Birthday: <span data-win-bind="textContent: birthday"></span></li>
                <li>Pet's name: <span data-win-bind="textContent: petname"></span></li>
                <li>Dessert: <span data-win-bind="textContent: dessert"></span></li>
            </ol>
        </div>
    </div>
    <div id="templateControlRenderTarget"></div>
    <fieldset id="templateControlObject">
        <legend>Pick a name:</legend>
        <select id="templateControlObjectSelector">
            <option value="0">Show one</option>
            <option value="1">Show two</option>
            <option value="2">Show three</option>
        </select>
    </fieldset>
</body>
</html>

default.js (Windows e Windows Phone)


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

            } else {

            }
       
            // Add event handler to selector. 
            var selector = document.querySelector("#templateControlObjectSelector");
            selector.addEventListener("change", handleChange, false);

            args.setPromise(WinJS.UI.processAll());

        }
    };

    app.start();

    // Define a Person 'class' with bindable properties.
    var Person = WinJS.Binding.define({
        name: "",
        color: "",
        birthday: "",
        petname: "",
        dessert: ""
    });

    // Declare an array of People objects.
    var people = [
        new Person({ name: "Bob", color: "red", birthday: "2/2/2002", petname: "Spot", dessert: "chocolate cake" }),
        new Person({ name: "Sally", color: "green", birthday: "3/3/2003", petname: "Xena", dessert: "cherry pie" }),
        new Person({ name: "Fred", color: "blue", birthday: "2/2/2002", petname: "Pablo", dessert: "ice cream" }),
    ];

    // Update the displayed data when the selector changes.
    function handleChange(evt) {
        var templateElement = document.querySelector("#templateDiv");
        var renderElement = document.querySelector("#templateControlRenderTarget");
        renderElement.innerHTML = "";

        var selected = evt.target.selectedIndex;
        var templateControl = templateElement.winControl;

        while (selected >= 0) {
            templateElement.winControl.render(people[selected--])
                .done(function (result) {
                    renderElement.appendChild(result);
                });        
        }
    }
})();

Argomenti correlati

Guida introduttiva: Aggiunta di un controllo ListView

Aggiunta di controlli FlipView

Condividi tramite