Question

WinJS允许您在运行时动态绑定HTML属性，类似于XAML绑定。

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

如果我还想绑定<h3>的字体颜色样式，我该如何实现呢？

Answer 1

与使用data-win-options语法的{key:value,key2:value2}绑定不同。 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>

然后您可以使用转换器返回首选颜色，具体取决于布尔值isImportant，如下所示：

JS：

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

使用WinJS绑定多个HTML属性？

2 个答案: