https://blog.okazuki.jp/entry/2015/01/01/225758

RatingとspanをViewModelを介してバインドしてみたいと思います。

ViewModelは、JavaScriptでバインド可能なようにしておきます。

var viewModel = WinJS.Binding.as({
    averageRating: 5
});

次に、WinJS.UI.processAllの後にデータバインドをします。

WinJS.UI.processAll()
    .then(function() {
        WinJS.Binding.processAll(null, viewModel);

        var rating = document.querySelector("#rating").winControl;
        rating.onchange = function (e) {
            viewModel.averageRating = e.detail.tentativeRating;
        };
    });

Ratingコントロールには、ratingというidをふっています。あとはRatingコントロールとspanタグにバインドしておきます。

<div id="rating"
     data-win-control="WinJS.UI.Rating"
     data-win-options="{
        maxRating: 10
     }"
     data-win-bind="winControl.averageRating: averageRating">
</div>

<span data-win-bind="textContent: averageRating"></span>

実行するとこんな感じで★がつきます。

f:id:okazuki:20150101225642p:plain

★をチェックすると、数字も連動します。

f:id:okazuki:20150101225750p:plain

ソース全体

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="WinJS/css/ui-light.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>
    <script src="WinJS/js/WinJS.js"></script>
    <title>こんにちは世界</title>
</head>
<body>

    <div id="rating"
         data-win-control="WinJS.UI.Rating"
         data-win-options="{
            maxRating: 10
         }"
         data-win-bind="winControl.averageRating: averageRating">
    </div>

    <span data-win-bind="textContent: averageRating"></span>

    <script type="text/javascript">
        WinJS.Application.onready = function () {
            var viewModel = WinJS.Binding.as({
                averageRating: 5
            });

            WinJS.UI.processAll()
                .then(function() {
                    WinJS.Binding.processAll(null, viewModel);

                    var rating = document.querySelector("#rating").winControl;
                    rating.onchange = function (e) {
                        viewModel.averageRating = e.detail.tentativeRating;
                    };
                });
        };
        WinJS.Application.start();
    </script>
</body>
</html>