WinJSで一方向データバインディング

追記

FirefoxだとinnerTextは動かないみたいなのでinnerHTMLを使うのがよさそうです。

データバインド

WinJS引き続きやってます。次はデータバインディングです。データバインディングには、WinJS.Binding.processAll(DOMの要素, データ)という形のメソッドを呼び出すことで出来るみたいです。

なので、body要素にnameとageを持ったpersonオブジェクトを結びつけるには以下のようなJSになります。

var person = { name: "tanaka", age: 10 };

WinJS.Binding.processAll(document.body, person);

では、HTMLのほうで、このオブジェクトをバインドするにはdata-win-bind属性を使うみたいです。書式は「バインド先: プロパティ名」みたいな感じです。バインド先のところにinnerTextとか書くと名前の通りタグ内のテキストにバインドするという意味みたいです。spanタグにnameをバインドするには以下のようになります。

<span id="nameSpan" data-win-bind="innerText: name"></span>

ということで、nameとageをバインドしたページ全体のソース。

<!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);
                WinJS.UI.processAll();
            };
            WinJS.Application.start();
        })();
    </script>
    <style type="text/css">
    </style>
</head>
<body>
    <h1>Data Binding</h1>
    <div class="win-type-x-large">
        <span id="nameSpan" data-win-bind="innerText: name"></span>
        さん
        <span id="ageSpan" data-win-bind="innerText: age"></span>
        歳
    </div>
</body>
</html>