かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

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