快速入门：添加分级 (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

Rating 控件允许用户通过单击代表分级的图标对某些内容进行分级。本快速入门展示如何向使用 JavaScript 的 Windows 应用商店应用添加 Rating 控件。

先决条件

我们假设你可以创建使用 WinJS 控件的基本 Windows 应用商店应用（采用 JavaScript）。有关如何开始使用 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 属性的值来获取用户的分级。

以下示例使用起始页的 activated 事件处理程序将 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.
            }
        }
    }

下一个示例修改前面所显示的 activated 事件处理程序，以便它检索所存储的用户分级并使用该分级设置 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。接着，可阅读分级控件指南和清单，学习如何以最佳方式使用分级控件。

通过