使用WinJS綁定多個HTML屬性？

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

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

如何，如果我想也結合了<h3>字體顏色款式爲好，我怎麼做到這一點？

來源

2012-04-10 Alan

與使用{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>

來源

2012-04-10 23:43:44 Alan

此外，您可以使用綁定初始化，形式爲：「富：酒吧My.Custom.Function」。看看WinJS.Binding.converter的幫助器/包裝。 – 2012-04-11 05:02:28

比方說，你要綠色和紅色之間切換如果時間戳是「重要的」，並在模型中有一個字段「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"; 
    }) 
});

來源

2012-08-02 12:26:54 Sindre

我不知道如何綁定到'style ['background-image']'屬性？因爲在CSS中它將使用'url'函數，即。 'background-image：url（'http://myurl.com/image.jpg'）'但是我怎麼在綁定中應用這個'url（）'？ – 2015-01-10 11:30:19

使用WinJS綁定多個HTML屬性？

回答

相關問題