WinJSで双方向バインド - かずきのBlog@hatena

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

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

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

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>