かずきのBlog@hatena

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

WinJSで双方向バインド

特に双方向バインドとかないんですね…。

単一方向のバインドと、コントロールのイベント拾ってバインドのソースに書き戻す。地道な作業です。フォームの入力項目の数が多いとだるい感じですね。

といってもポイントはあります。

WinJS.Binding.as

WinJS.Binding.asを使ってバインドのソースを変換してやって、そいつに対して値を書き戻してやるというのがポイントです。nameとageのプロパティを持ったオブジェクトに対してTextBoxとspanで双方向バインドするコードは以下の通り。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WinJS Hello world</title>
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>
    <script src="WinJS/js/WinJS.js"></script>
    <script type="text/javascript">
        (function () {
            "use strict";

            WinJS.Application.onready = function () {
                var person = { name: "tanaka", age: 10 };
                WinJS.Binding.processAll(document.body, person);

                // 双方向バインド用にオブジェクトを変換する
                var source = WinJS.Binding.as(person);
                document.querySelector("#nameInput").onchange = function (e) {
                    source.name = e.target.value;
                };
                document.querySelector("#ageInput").onchange = function (e) {
                    source.age = e.target.value;
                };

                WinJS.UI.processAll();
            };
            WinJS.Application.start();
        })();
    </script>
    <style type="text/css">
        #container {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Data Binding</h1>
        <div id="inputForm">
            <input id="nameInput" type="text" data-win-bind="value: name" />
            <input id="ageInput" type="text" data-win-bind="value: age"/>
        </div>
        <div id="personDiv" class="win-type-x-large">
            <span id="nameSpan" data-win-bind="innerHTML: name"></span>
            さん
            <span id="ageSpan" data-win-bind="innerHTML: age"></span></div>
    </div>
</body>
</html>

TextBoxのonchangeイベントでWinJS.Binding.asで変換したオブジェクトに対してデータを書き戻してる点がポイントです。

実行結果

実行すると以下のようになります。まず実行直後。

f:id:okazuki:20141229211621p:plain

TextBoxを書き換えると、JavaScriptのオブジェクトを通してspanタグの中身も書き変わります。

f:id:okazuki:20141229211714p:plain