Démarrage rapide : liaison de données et de styles (HTML)

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez lier des données et des styles à des éléments HTML à l’aide de la fonctionnalité de liaison de la bibliothèque Windows pour JavaScript. La liaison à l’aide de WinJS est une opération unidirectionnelle par défaut, ce qui signifie que l’élément HTML est mis à jour quand les valeurs de données et de style changent, mais que les données ne sont pas mises à jour quand l’élément HTML change. Ce didacticiel de démarrage rapide montre le type de liaison le plus élémentaire, une liaison déclarative à un objet simple ne contenant que des données. Pour plus d’informations sur les types de liaison plus avancés, voir Comment lier un objet complexe et Comment utiliser des modèles pour lier des données.

Prérequis

Cette rubrique part du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour obtenir des instructions sur la création de votre première application, voir Création de votre première application en JavaScript.

Configuration d’un projet de liaison

Pour configurer un projet afin d’utiliser la fonctionnalité de liaison, effectuez les étapes suivantes.

  1. Créez une application Windows Runtime en JavaScript vide et nommez-la BindingApp.

  2. Dans default.html, ajoutez un élément DIV pour la liaison, puis attribuez-lui un ID ayant pour valeur "basicBinding" et le texte interne Welcome, comme illustré ci-dessous.

    <body>
    <div id="basicBinding">
      Welcome
    </div>
</body>

Liaison de données

Vous pouvez lier n’importe quel type de données à un élément HTML ; toutefois, à des fins d’illustration, nous allons simplement configurer un objet person qui possède un champ pour un prénom.

Avertissement  Vous ne devez pas essayer de lier des données à l’identificateur d’un élément HTML.

 

  1. Dans default.js, ajoutez la ligne de code suivante dans la fonction anonyme immédiatement appelée, juste après la directive use strict.

    (function () {
    "use strict";

    // Create a 'person' object.
    var person = { name: "Fran" };

    // Other app set-up code.
})();

  2. Dans l’élément DIV, ajoutez un élément SPAN qui accède au champ person.name.

    <div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

  3. Vous devez appeler WinJS.Binding.processAll pour que le nom apparaisse. WinJS.Binding.processAll commence par rechercher l’attribut data-win-bind au niveau de l’élément spécifié, puis analyse tous les descendants de cet élément. Le deuxième paramètre de WinJS.Binding.processAll fournit le contexte de données à injecter dans l’élément spécifié. Ajoutez le code suivant dans le gestionnaire d’événements app.onactivated dans default.js.

    app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}

  4. Lorsque vous générez et déboguez le projet, vous devez obtenir ceci à l’écran :

    Welcome, Fran

  5. Observez le fragment de code suivant :

    
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
    • Le système de liaison WinJS utilise une couche observable pour propager des notifications de modification.
    • Lorsque vous passez un objet de données dans processAll comme contexte de données, il est encapsulé dans un appel à WinJS.Binding.as, qui crée ou rencontre un proxy observable déjà créé pour cet objet.
    • Toutes les « écritures » (c’est-à-dire jeux de propriétés) pour lesquelles vous voulez déclencher des notifications doivent se produire via cette couche proxy ; vous pouvez rencontrer ultérieurement le proxy observable via WinJS.Binding.as.
    • Le plus souvent, le plus simple est d’utiliser ce proxy observable en tant qu’objet pour lire et écrire des données.
    • Une liaison ponctuelle se produit lorsque vous utilisez un initialiseur de liaison pour remplacer le comportement par défaut (par exemple, WinJS.Binding.oneTime) ou essayez d’effectuer une liaison par rapport à des objets non extensibles (tels que des objets projetés WinRT ou figés).

  6. Pour montrer ce qui se passe lorsque les données sous-jacentes changent, nous allons simplement utiliser un bouton pour simuler la récupération de données d’un autre processus ou d’un magasin de données interne. Ajoutez un élément BUTTON à default.html, sous l’élément DIV.

    <button id="btnGetName">Get name</button>

  7. Ajoutez une méthode fictive qui simule la récupération des données. Dans le cas présent, nous allons récupérer le nom à partir d’un tableau à l’aide d’un index randomisé. Dans default.js, ajoutez le code suivant au gestionnaire d’événements app.onactivated qui gère l’événement de clic du bouton.

    document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray);
    }

var nameArray =
        new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

function getName(source, nameArray) {
    source.name = nameArray[randomizeValue()];
}

function randomizeValue() {
    var value = Math.floor((Math.random() * 1000) % 8);
    if (value < 0)
        value = 0;
    else if (value > 9)
        value = 9;
    return value;
}

  8. Pour tester ce code, générez et déboguez l’application. Vous devez voir un nom différent chaque fois que vous cliquez sur le bouton Get name.

Liaison d’un style

À présent, nous allons lier la couleur d’arrière-plan de l’élément SPAN.

  1. Dans default.html, ajoutez une valeur style.background à l’attribut data-win-bind, puis définissez sa liaison sur le champ color de l’objet person.

    <div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>

  2. Dans default.js, ajoutez un champ color à l’objet person.

    Astuce  La partie gauche d’une expression de liaison correspond à une propriété d’un élément et ses sous-propriétés en JavaScript (dont vous vous servez pour l’assigner par programmation).

     

    var person = { name: "Fran", color: "red" };

  3. Également dans default.js, dans le gestionnaire d’événements app.onactivated, ajoutez un second tableau de couleurs et modifiez la fonction getName afin qu’elle mette à jour la couleur du nom.

    var colorArray =
    new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue","lightgreen", "lightyellow");

function getName(source, nameArray, colorArray) {
    source.name = nameArray[randomizeValue()];
    source.color = colorArray[randomizeValue()];
    }

  4. N’oubliez pas de modifier l’appel à getName dans le gestionnaire d’événements de clic du bouton.

    document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

  5. Lorsque vous générez et déboguez l’application, le fait de cliquer sur le bouton Get name doit entraîner la mise à jour du nom et de la couleur du nom.

Récapitulatif et étapes suivantes

Dans ce guide de démarrage rapide, vous avez vu comment lier un objet JavaScript simple à un élément span HTML.

Pour découvrir comment lier des objets plus complexes, voir Comment lier un objet complexe. Pour plus d’informations sur la liaison de plusieurs objets à l’aide d’un modèle, voir Comment lier des données à l’aide de modèles.