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

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

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> 

次にあなたがbooleaに応じて、好ましい色を返すために、コンバータを使用することができますnは、このようなisImportant：

JS： "FOO：：バーMy.Custom.Function"

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