かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

WinJSのデータバインドでコンバーターを使う(TypeScript使用)

TypeScriptのmoduleにコンバーターを定義する方法です。

WinJS.Binding.converter関数を使ってコンバーターを作成します。

module Converters {
    export var sampleConverter = WinJS.Binding.converter((value: string) => {
        return value + value;
    });
}

あとは、こんな感じでバインドするようにして

WinJS.UI.Pages.define("/pages/home/home.html", {
    ready: () => {
        WinJS.Binding.processAll(null, { name: "tanaka" });
    }
});

HTMLでdata-win-bindで、バインド先の属性名: バインドするプロパティ名 コンバーターの並びで書けばOKです。

<span data-win-bind="textContent: name Converters.sampleConverter"></span>

こうすると画面に

tanakatanaka

と表示されるようになります。