windows-8 - WinJS を使用して複数の HTML プロパティをバインドしますか?

Question

WinJS を使用すると、XAML バインドと同様に、実行時に HTML プロパティを動的にバインドできます。

<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
    <h3 data-win-bind="innerText: timestamp"></h3>
</div>

フォントの色のスタイルもバインドしたい場合、どうすればそれ<h3>を達成できますか?

Answer 1

構文data-win-optionsを利用するバインディングとは異なります。inline-css スタイルに似た構文を使用します。{key:value,key2:value2}data-win-binding

etc を使用property:bindingValue;property2:bindingValue2すると、複数のプロパティを同じ HTML コントロールにバインドできます。

上記の質問に答える例として：

<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
     <h3 data-win-bind="style.color: fontcolor; innerText: timestamp"></h3>
</div>

Answer 2

タイムスタンプが「重要」で、モデルに「isImportant」フィールドがある場合に、緑と赤を切り替えたいとします。

HTML:

<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    <h3 data-win-bind="innerText: timestamp; style.color: isImportant MyConverters.colorConverter"></h3> </div>

次に、コンバーターを使用して、ブール値 isImportant に応じて優先色を次のように返すことができます。

JS:

WinJS.Namespace.define("MyConverters", {
    //Converter function
    colorConverter: WinJS.Binding.converter(function (important) {
        return important ? "Green" : "Red";
    })
});