Freigeben über


Schnellstart: Hinzufügen von Bewertungen (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 ]

Mit dem Rating-Steuerelement können Benutzer etwas bewerten, indem sie auf ein Symbol klicken, das eine Bewertung darstellt. In dieser Schnellstartanleitung erfahren Sie, wie Sie Ihrer Windows Store-App mit JavaScript ein Bewertungssteuerelement hinzufügen.

Voraussetzungen

Es wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können, die WinJS-Steuerelemente verwendet. Anweisungen zu den ersten Schritten mit WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Erstellen eines Bewertungssteuerelements

Zum Erstellen eines Rating-Steuerelements erstellen Sie ein div-Element und legen die data-win-control-Eigenschaft auf "WinJS.UI.Rating" fest. Dies ist ein Beispiel für das Erstellen eines einfachen Bewertungssteuerelements:

<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>

Hinweis  Für die Instanziierung des Steuerelements muss Ihre Seite die WinJS JavaScript-Dateien enthalten, und Sie müssen die WinJS.UI.processAll-Funktion auf der CodeBehind-Seite aufrufen. Weitere Informationen finden Sie unter Hinzufügen von WinJS-Steuerelementen und -Stilen.

 

Festlegen von Durchschnitts- und Höchstbewertung

Die averageRating-Eigenschaft gibt die durchschnittliche Bewertung des Elements an. (Sie legen selbst fest, wie die Durchschnittsbewertung ermittelt wird.) Wenn Sie die averageRating-Eigenschaft festlegen, wird das Rating-Steuerelement angezeigt, bis der Benutzer eine eigene Bewertung angibt. Das folgende Beispiel legt averageRating auf 3,4 fest.

<div id="ratingControl" data-win-control="WinJS.UI.Rating"
    data-win-options="{averageRating : 3.4}"></div>

Die maxRating-Eigenschaft gibt die höchste mögliche Bewertung an. Der Standardwert ist 5. Das nächste Beispiel legt maxRating auf 7 fest. Bei der Anzeige stellt das Steuerelement 7 Sterne anstelle von 5 dar.

<div id="ratingControl" data-win-control="WinJS.UI.Rating"
    data-win-options="{averageRating : 3.4, maxRating : 7}"></div>

Abrufen der Benutzerbewertung

Wenn der Benutzer eine Bewertung auswählt, löst dies das change-Ereignis aus. Sie erhalten die Bewertung des Benutzers, indem Sie den Wert der userRating-Eigenschaft abrufen.

Dieses Beispiel verwendet den auf der Startseite aktivierten Ereignishandler, um dem Rating-Steuerelement einen change-Ereignishandler hinzuzufügen. (Weitere Informationen zur besten Vorgehen beim Anfügen von Ereignissen finden Sie unter Hinzufügen von Steuerelementen und Behandeln von Ereignissen.)

(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll()
            .done(function () {

                // Get the rating control
                var ratingControl = document.getElementById("ratingControl").winControl;

                ratingControl.addEventListener("change", changeRating);
            });
        }
    };

    app.start();
})();

Die changeRating-Funktion des Beispielereignishandlers ruft die Bewertung des Benutzers ab und speichert sie.

    function changeRating(ev) {
        var ratingControl = ev.target.winControl;
        if (ratingControl) {

            if (ratingControl.userRating != 0) {

                // Put your code here to save user rating and re-calculate average rating.
                WinJS.Application.sessionState.userRating = ratingControl.userRating;

                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Write a setting
                roamingValues.insert("userRating", ratingControl.userRating);
            } else {

                // Put your code here to delete user rating.
            }
        }
    }

Das nächste Beispiel ändert den zuvor gezeigten, aktivierten Ereignishandler, damit dieser die gespeicherte Benutzerbewertung abruft und damit das Rating-Steuerelement festlegt.

(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll()
            .done(function () {

                // Get the rating control
                var ratingControl = document.getElementById("ratingControl").winControl;

                // Retrieve stored state info 
                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Read a setting
                var currentRating = parseFloat(roamingValues.lookup("userRating"));

                if (currentRating > 0) {
                    ratingControl.userRating = currentRating;
                }

                ratingControl.addEventListener("change", changeRating);
            });
        }
    };

    function changeRating(ev) {
        var ratingControl = ev.target.winControl;
        if (ratingControl) {

            if (ratingControl.userRating != 0) {

                // Put your code here to save user rating and re-calculate average rating.
                WinJS.Application.sessionState.userRating = ratingControl.userRating;

                var appData = Windows.Storage.ApplicationData.current;
                var roamingValues = appData.roamingSettings.values;

                // Write a setting
                roamingValues.insert("userRating", ratingControl.userRating);
            } else {

                // Put your code here to delete user rating.
            }
        }
    }

    app.start();
})();

Zusammenfassung und nächste Schritte

Sie haben erfahren, wie Sie ein Rating-Steuerelement erstellen und dessen userRating speichern und abrufen. Wie Sie Bewertungssteuerelemente am besten verwenden, erfahren Sie unter Richtlinien und Prüfliste für Bewertungssteuerelemente.

Verwandte Themen

WinJS.UI.Rating