WinJS を使用すると、XAML バインドと同様に、実行時に HTML プロパティを動的にバインドできます。
<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
<h3 data-win-bind="innerText: timestamp"></h3>
</div>
フォントの色のスタイルもバインドしたい場合、どうすればそれ<h3>
を達成できますか?
WinJS を使用すると、XAML バインドと同様に、実行時に HTML プロパティを動的にバインドできます。
<div id="itemTemplate" data-win-control="WinJS.Binding.Template"...>
<h3 data-win-bind="innerText: timestamp"></h3>
</div>
フォントの色のスタイルもバインドしたい場合、どうすればそれ<h3>
を達成できますか?
構文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>
タイムスタンプが「重要」で、モデルに「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";
})
});