Cómo usar plantillas para enlazar datos (HTML)

Artículo
12/12/2015

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

Las plantillas de la biblioteca de Windows para JavaScript permiten dar formato a varias instancias de datos y mostrarlas de forma sencilla. Puedes usar estas plantillas junto con los objetos ListView y FlipView para especificar la manera en que quieres que se muestren. También puedes usar una plantilla para enlazar varias instancias de un objeto de datos sin usar una vista predefinida. Para más información sobre cómo usar una plantilla con un control ListView, consulta Inicio rápido: agregar ListView. Para más información sobre cómo usar una plantilla con un control FlipView, consulta Agregar controles FlipView. En el siguiente procedimiento se muestra cómo usar una plantilla con una matriz.

Puedes definir una plantilla de forma declarativa como un control de WinJS y especificar su estructura y estilo internos. Aunque se declaren como elementos DIV, las plantillas no se procesan como parte del DOM y no se devuelven como parte de los resultados de búsqueda del DOM. Puedes especificar el elemento DIV en el que debe aparecer la plantilla o permitir que el método render cree su propio elemento DIV. En este tema se muestra cómo usar una plantilla para enlazar un número variable de objetos de datos enlazables a un elemento DIV. El usuario elige el número de objetos que se van a mostrar mediante la selección de un elemento en una lista desplegable.

Requisitos previos

Puedes consultar el tema Inicio rápido: enlazar datos y estilos a elementos HTML para ayudarte a completar los pasos de este tema de procedimientos

Instrucciones

Paso 1: Configurar un proyecto para usar una plantilla

Sigue estos pasos para configurar un proyecto para usar una plantilla.

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

Crea una aplicación de la Tienda Windows con JavaScript vacía y llámala TemplateExample.
Dentro del elemento BODY del archivo default.html, agrega un elemento DIV para la plantilla y asígnale el identificador templateDiv; después agrega un atributo data-win-control con el valor "WinJS.Binding.Template", como se muestra aquí.
```
<body>
    <div id="templateDiv" data-win-control="WinJS.Binding.Template"></div> 
</body>
```
Después agregaremos la estructura interna de la plantilla, pero antes debemos definir el objeto de datos.

Paso 2: Definir un objeto de datos y enlazarlo a los campos de la plantilla

Declara un objeto que contenga varios campos dentro de la función invocada inmediatamente en default.js. En este caso, usaremos WinJS.Binding.define, que hace que todas las propiedades sean enlazables.


(function () {
    "use strict";

    // Other app code ...

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

})();

Para mostrar los campos de este objeto en la plantilla, necesitarás una lista cuyos elementos se correspondan con los campos del objeto de datos, como se muestra aquí. Agrega el siguiente código dentro de las etiquetas BODY, en 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>

En default.html, debajo del código de la plantilla, agrega un elemento DIV donde debe representarse la plantilla.
```
<div id="templateControlRenderTarget"></div>
```

Paso 3: Controlar el número de objetos mostrados

En este ejemplo, crearemos instancias de tres objetos Person y agregaremos una lista desplegable para que el usuario pueda seleccionar el número de objetos Person que se van a mostrar.

Agrega el código siguiente dentro de las etiquetas BODY, en default.html.

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

Crea una matriz de tres objetos Person dentro de la función anónima invocada inmediatamente en default.js.


(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. Ahora, agrega una escucha al evento de cambio del selector desplegable. Agrega el código siguiente dentro del controlador del evento app.onactivated en default.js.

app.onactivated = function (args) {

    // Other activation code ...

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

}

En el controlador de eventos de cambio, selecciona el elemento DIV que contiene la plantilla y el elemento DIV que especifica dónde se van a mostrar los datos, y después llama a render en el control de la plantilla (que se puede obtener de la propiedad wincontrol del elemento templateDiv). Al llamar a render en la plantilla, los campos relevantes del objeto de datos se enlazan a los elementos de lista de la plantilla.

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); 
    } 
}

Ahora puedes compilar y depurar la aplicación. Cuando seleccionas un elemento de la lista desplegable, la aplicación mostrará el número de objetos de datos adecuado.

Paso 4: Permitir que la representación agregue un elemento DIV

No es necesario que proporciones a la función render un elemento DIV que hayas creado; render crea un nuevo elemento DIV si no se especificó ninguno. Sin embargo, debes agregar el nuevo elemento DIV al DOM. Ten en cuenta que el valor de devolución de render es un WinJS.Promise. Para más información sobre las promesas, consulta Inicio rápido: uso de promesas. En el método done de la promesa, agregas una función que agrega el nuevo elemento DIV.

Cambia el bloque while del paso anterior de la siguiente manera.


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

Observaciones

Esta es la lista completa del código de este tema.

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 y 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);
                });        
        }
    }
})();

Temas relacionados

Inicio rápido: agregar ListView

Agregar controles FlipView