特に双方向バインドとかないんですね…。
単一方向のバインドと、コントロールのイベント拾ってバインドのソースに書き戻す。地道な作業です。フォームの入力項目の数が多いとだるい感じですね。
といってもポイントはあります。
WinJS.Binding.as
WinJS.Binding.asを使ってバインドのソースを変換してやって、そいつに対して値を書き戻してやるというのがポイントです。nameとageのプロパティを持ったオブジェクトに対してTextBoxとspanで双方向バインドするコードは以下の通り。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>WinJS Hello world</title><linkhref="WinJS/css/ui-dark.css"rel="stylesheet" /><scriptsrc="WinJS/js/base.js"></script><scriptsrc="WinJS/js/ui.js"></script><scriptsrc="WinJS/js/WinJS.js"></script><scripttype="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><styletype="text/css">#container{margin: 10px; }</style></head><body><divid="container"><h1>Data Binding</h1><divid="inputForm"><inputid="nameInput"type="text"data-win-bind="value: name" /><inputid="ageInput"type="text"data-win-bind="value: age"/></div><divid="personDiv"class="win-type-x-large"><spanid="nameSpan"data-win-bind="innerHTML: name"></span>さん <spanid="ageSpan"data-win-bind="innerHTML: age"></span>歳 </div></div></body></html>
TextBoxのonchangeイベントでWinJS.Binding.asで変換したオブジェクトに対してデータを書き戻してる点がポイントです。
実行結果
実行すると以下のようになります。まず実行直後。
TextBoxを書き換えると、JavaScriptのオブジェクトを通してspanタグの中身も書き変わります。
