Binding multiple HTML properties using WinJS?

问题

WinJS allows you to bind HTML properties dynamically at run-time, similar to XAML binding.

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

How if I want to also bind the font color style for <h3> as well, how do I achieve that?

回答1:

Unlike the data-win-options binding which makes use of {key:value,key2:value2} syntax. data-win-binding uses a syntax similar to inline-css styles.

Using property:bindingValue;property2:bindingValue2 etc will allow you bind multiple properties to the same HTML control.

As an example to answer the question above:

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

回答2:

Lets say you want to switch between green and red color if the timestamp is "important", and you have a field "isImportant" in your model:

HTML:

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

Then you could use an converter to return the preferred color depending on the boolean isImportant like this:

JS:

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

来源：https://stackoverflow.com/questions/10097998/binding-multiple-html-properties-using-winjs