使用WinJS綁定多個HTML屬性？

Question

WinJS允許您在運行時動態綁定HTML屬性，類似於XAML綁定。

<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使用類似於inline-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 ñisImportant這樣的：

JS：

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