So wird’s gemacht: Verwenden von Vorlagen zum Binden von Daten (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Vorlagen der Windows-Bibliothek für JavaScript bieten eine bequeme Möglichkeit, um mehrere Dateninstanzen zu formatieren und anzuzeigen. Sie können diese Vorlagen in Verbindung mit ListView- und FlipView-Objekten verwenden, um festzulegen, wie sie angezeigt werden sollen. Außerdem können Sie mithilfe einer Vorlage mehrere Instanzen eines Datenobjekts binden, ohne eine vordefinierte Ansicht zu verwenden. Weitere Informationen zur Verwendung einer Vorlage mit ListView finden Sie unter Schnellstart: Hinzufügen von ListView-Steuerelementen. Weitere Informationen zur Verwendung einer Vorlage mit FlipView finden Sie unter Schnellstart: Hinzufügen von FlipView-Steuerelementen. Das folgende Verfahren zeigt die Verwendung einer Vorlage für ein Array.
Sie können eine Vorlage deklarativ als WinJS-Steuerelement definieren und dessen interne Struktur und den Stil festlegen. Vorlagen werden zwar als DIV-Elemente deklariert, jedoch nicht als Teil des DOM verarbeitet und nicht im Rahmen der DOM-Suchergebnisse zurückgegeben. Sie können das DIV-Element für die Vorlage angeben oder zulassen, dass die render-Methode ein eigenes DIV-Element erstellt. In diesem Thema wird erläutert, wie Sie eine variable Anzahl bindbarer Datenobjekte mithilfe einer Vorlage an ein DIV-Element binden. Der Benutzer wählt die Anzahl anzuzeigender Objekte aus, indem er ein Element aus einer Dropdownliste auswählt.
Voraussetzungen
- Das Thema Schnellstart: Binden von Daten und Stilen an HTML-Elemente kann Ihnen dabei helfen, die einzelnen Schritte in dieser Anleitung auszuführen.
Anweisungen
Schritt 1: Einrichten eines Projekts für die Verwendung einer Vorlage
Führen Sie die folgenden Schritte durch, um ein Projekt für die Verwendung einer Vorlage einzurichten.
.gif "Hh700356.wedge(de-de,WIN.10).gif")
Erstellen Sie eine leere Windows Store-App mit JavaScript, und geben Sie ihr den Namen TemplateExample.
Fügen Sie innerhalb des BODY-Elements der Datei "default.html" ein DIV-Element für die Vorlage hinzu, geben Sie diesem die ID templateDiv, und fügen Sie dann, wie hier gezeigt, ein data-win-control-Attribut mit einem Wert von "WinJS.Binding.Template" hinzu.
<body> <div id="templateDiv" data-win-control="WinJS.Binding.Template"></div> </body>Die interne Struktur der Vorlage fügen wir hinzu, nachdem wir das Datenobjekt definiert haben.
Schritt 2: Definieren eines Datenobjekts und Binden des Datenobjekts an die Felder der Vorlage
Deklarieren Sie in einer sofort aufgerufenen Funktion in "default.js" ein Objekt mit mehreren Feldern. In diesem Fall verwenden wir WinJS.Binding.define, wodurch sich alle Eigenschaften binden lassen.
(function () { "use strict"; // Other app code ... // Define a Person object with bindable properties. var Person = WinJS.Binding.define({ name: "", color: "", birthday: "", petname: "", dessert: "" }); })();Um die Felder dieses Objekts in der Vorlage anzuzeigen, benötigen Sie, wie hier gezeigt, eine Liste, deren Elemente den Feldern des Datenobjekts entsprechen. Fügen Sie den folgenden Code in den BODY-Tags in "default.js" hinzu:
<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>Fügen Sie nach dem Vorlagencode in "default.html" ein DIV-Element an der Stelle hinzu, an der die Vorlage gerendert werden soll.
<div id="templateControlRenderTarget"></div>
Schritt 3: Kontrollieren der Anzahl angezeigter Objekte
Für dieses Beispiel instanziieren wir drei Person-Objekte und fügen eine Dropdownliste hinzu, sodass der Benutzer die Anzahl anzuzeigender Person-Objekte auswählen kann.
Fügen Sie in den BODY-Tags in "default.html" den folgenden Code hinzu:
<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>Erstellen Sie innerhalb der sofort aufgerufenen anonymen Funktion "default.js" ein Array mit drei
Person-Objekten.(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"}), ]; })();Fügen Sie jetzt dem Änderungsereignis des Dropdownselektors einen Listener hinzu. Fügen Sie diesen Code im Handler für das app.onactivated-Ereignis in "default.js" hinzu.
app.onactivated = function (args) { // Other activation code ... var selector = document.querySelector("#templateControlObjectSelector"); selector.addEventListener("change", handleChange, false); }
Wählen Sie im Änderungsereignishandler das DIV-Element aus, das die Vorlage enthält, sowie das DIV-Element, das angibt, wo die Daten angezeigt werden sollen. Rufen Sie dann render für das Vorlagensteuerelement auf. (Dies können Sie von der wincontrol-Eigenschaft des templateDiv-Elements erhalten.) Wenn Sie render für die Vorlage aufrufen, werden die entsprechenden Felder des Datenobjekts an die Listenelemente der Vorlage gebunden.
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);
}
}
Sie können die App nun erstellen und debuggen. Wenn Sie einen Eintrag in der Dropdownliste auswählen, zeigt die App die entsprechende Anzahl von Datenobjekten an.
Schritt 4: Hinzufügen eines DIV durch "render" zulassen
Sie müssen der render-Funktion kein von Ihnen erstelltes DIV übergeben. render erstellt ein neues DIV, wenn kein DIV angegeben wurde. Sie müssen das neue DIV allerdings dem DOM hinzufügen. Beachten Sie, dass der Rückgabewert von render ein WinJS.Promise ist. (Weitere Informationen zu Zusagen finden Sie in Schnellstart: Verwenden von Zusagen. Fügen Sie in der done-Methode der Zusage eine Funktion hinzu, die das neue DIV hinzufügt.
Ändern Sie den while-Block aus dem letzten Schritt wie folgt.
while (selected >= 0) {
templateElement.winControl.render(people[selected--])
.done(function (result) {
renderElement.appendChild(result);
});
}
Anmerkungen
Hier sehen Sie den gesamten Code aus diesem Thema.
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 und 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);
});
}
}
})();