追記
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をバインドするには以下のようになります。
<spanid="nameSpan"data-win-bind="innerText: name"></span>
ということで、nameとageをバインドしたページ全体のソース。
<!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); WinJS.UI.processAll();}; WinJS.Application.start();})();</script><styletype="text/css"></style></head><body><h1>Data Binding</h1><divclass="win-type-x-large"><spanid="nameSpan"data-win-bind="innerText: name"></span>さん <spanid="ageSpan"data-win-bind="innerText: age"></span>歳 </div></body></html>
実行すると以下のようになります。
