かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

WinJSのRatingコントロールと双方向バインディング

WinJS

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>