Comment utiliser des modèles pour lier des données (HTML)
[ 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 ]
Les modèles de la Bibliothèque Windows pour JavaScript offrent un moyen pratique de mettre en forme et d’afficher plusieurs instances de données. Vous pouvez les utiliser conjointement avec des objets ListView et FlipView pour spécifier la manière dont vous souhaitez les afficher. Vous pouvez également utiliser un modèle pour lier plusieurs instances d’un objet de données sans utiliser d’affichage prédéfini. Pour plus d’informations sur l’utilisation d’un modèle avec ListView, voir Démarrage rapide : ajouter un objet ListView. Pour plus d’informations sur l’utilisation d’un modèle avec FlipView, voir Ajout de contrôles FlipView. La procédure suivante montre comment utiliser un modèle avec un tableau.
Vous pouvez définir un modèle de façon déclarative comme un contrôle WinJS et spécifier sa structure et son style interne. Bien que déclarés comme des éléments DIV, les modèles ne sont pas traités comme faisant partie du modèle DOM et ne sont pas pris en compte dans les résultats de recherche DOM. Vous pouvez spécifier l’élément DIV dans lequel le modèle doit apparaître ou autoriser la méthode de rendu à créer son propre élément DIV. Cette rubrique explique comment utiliser un modèle pour lier un nombre variable d’objets de données pouvant être liés à un élément DIV. L’utilisateur choisit le nombre d’objets à afficher en sélectionnant un élément dans une liste déroulante.
Prérequis
- La lecture de la rubrique Démarrage rapide : liaison de données et de styles à des éléments HTML vous sera sans doute utile pour accomplir la procédure décrite ici.
Instructions
Étape 1: Définition d’un projet pour l’utilisation d’un modèle
Pour définir un projet pour l’utilisation d’un modèle, procédez comme indiquez ci-dessous.
.gif "Hh700356.wedge(fr-fr,WIN.10).gif")
Créez une application du Windows Store en JavaScript vide et nommez-la TemplateExample.
Dans l’élément BODY du fichier default.html, ajoutez un élément pour le modèle et donnez-lui l’ID de templateDiv, puis ajoutez un attribut data-win-control dont la valeur est "WinJS.Binding.Template", comme indiqué ici.
<body> <div id="templateDiv" data-win-control="WinJS.Binding.Template"></div> </body>Nous reviendrons pour ajouter la structure interne du modèle après avoir défini l’objet de données.
Étape 2: Définition d’un objet de données et liaison de l’objet aux champs du modèle
Dans la fonction appelée immédiatement dans default.js, déclarez un objet qui contient plusieurs champs. Dans cet exemple, nous allons utiliser la méthode WinJS.Binding.define, qui rend toutes les propriétés susceptibles d’être liées.
(function () { "use strict"; // Other app code ... // Define a Person object with bindable properties. var Person = WinJS.Binding.define({ name: "", color: "", birthday: "", petname: "", dessert: "" }); })();Pour afficher les champs de cet objet dans ce modèle, vous avez besoin d’une liste dont les éléments correspondent aux champs de l’objet de données, comme illustré ici. Ajoutez le code suivant à l’intérieur des balises BODY dans 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>Sous le code du modèle dans default.html, ajoutez un élément DIV à l’emplacement où le modèle doit être affiché.
<div id="templateControlRenderTarget"></div>
Étape 3: Contrôle du nombre d’objets affichés
Dans cet exemple, nous allons instancier trois objets Person et ajouter une liste déroulante de manière à ce que l’utilisateur puisse sélectionner le nombre d’objets Person à afficher.
À l’intérieur des balises BODY dans default.html, ajoutez le code suivant.
<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>Dans la fonction anonyme appelée immédiatement dans default.js, créez un tableau de trois objets
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. Ajoutez maintenant un écouteur à l’événement de modification du sélecteur de la liste déroulante. Ajoutez ce code dans le gestionnaire de l’événement app.onactivated dans default.js.
app.onactivated = function (args) { // Other activation code ... var selector = document.querySelector("#templateControlObjectSelector"); selector.addEventListener("change", handleChange, false); }
Dans le gestionnaire des événements de modification, sélectionnez l’élément DIV qui contient le modèle et l’élément DIV qui spécifie où afficher les données, puis appelez la méthode render sur le contrôle du modèle (que vous pouvez obtenir depuis la propriété wincontrol de l’élément templateDiv). Lorsque vous appelez la méthode render sur le modèle, les champs concernés de l’objet de données sont liés aux éléments de liste du modèle.
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);
}
}
Vous pouvez maintenant générer et déboguer l’application. Faites une sélection dans la liste déroulante, l’application affiche le nombre adéquat d’objets de données.
Étape 4: Autoriser render à ajouter un DIV
Vous n’êtes pas tenu de donner à la fonction render un DIV que vous avez créé ; render crée un nouveau DIV si aucun DIV n’est spécifié. Toutefois, vous devez ajouter le nouveau DIV au DOM. Notez que la valeur de retour de render est WinJS.Promise. (Pour plus d’informations sur les promesses, voir Démarrage rapide : utilisation de promesses.) Dans la méthode done de la promesse, vous ajoutez une fonction qui ajoute le nouveau DIV.
Changez le bloc while de l’étape précédente comme suit.
while (selected >= 0) {
templateElement.winControl.render(people[selected--])
.done(function (result) {
renderElement.appendChild(result);
});
}
Remarques
Voici la liste complète du code décrit dans cette rubrique.
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 et 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);
});
}
}
})();