windows-8 - 使用 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

与data-win-options使用{key:value,key2:value2}语法的绑定不同。data-win-binding使用类似于 inline-css 样式的语法。

使用property:bindingValue;property2:bindingValue2etc 将允许您将多个属性绑定到同一个 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";
    })
});