快速入門：新增評等 (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

使用 Rating 控制項可以讓使用者按一下代表評等的圖示進行評等。這個快速入門會顯示如何將評等控制項新增到使用 JavaScript 的 Windows 市集應用程式。

先決條件

我們假設您可以利用 JavaScript，以 WinJS 控制項建立基本的 Windows 市集應用程式。如需開始使用 WinJS 控制項的指示，請參閱快速入門：新增 WinJS 控制項與樣式。

建立評等控制項

若要建立 Rating 控制項，請建立 div 元素，並將 data-win-control 屬性設為 "WinJS.UI.Rating"。以下是如何建立基本評等控制項的範例：

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

注意為了具現化控制項，您的網頁必須包含 WinJS 的 JavaScript 檔案，而且必須在程式碼後置中呼叫 WinJS.UI.processAll 函式。如需詳細資訊，請參閱快速入門：新增 WinJs 控制項與樣式。

設定平均評等和最高評等

averageRating 屬性會指定要評等的項目的平均評等。(您可以決定項目的平均評等方式)。如果您設定 averageRating 屬性，Rating 控制項會顯示它，直到使用者選取自己的評等為止。下列範例將 averageRating 設為 3.4。

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

maxRating 屬性會指定可評等的上限。預設值是 5。下一個範例將 maxRating 設為 7；當控制項顯示時，它會顯示 7 顆星，而非 5 顆星。

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

取得使用者評等

當使用者挑選評等時，會觸發 change 事件。您可以藉由取得 userRating 屬性的值來取得使用者的評等。

這個範例使用起始頁的啟用事件處理常式，將 change 事件處理常式新增到 Rating 控制項。(如需有關附加事件最佳位置的詳細資訊，請參閱快速入門：新增控制項和處理事件)。

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

事件處理函式範例 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.
            }
        }
    }

下一個範例會修改稍早顯示的啟用事件處理常式，使其抓取儲存的使用者評等，並使用它來設定 Rating 控制項。

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

摘要與後續步驟

您已學會如何建立 Rating 控制項以及如何儲存及抓取其 userRating。接下來，請閱讀評等控制項的指導方針和檢查清單，了解如何充分運用評等控制項。

共用方式為