使用 WinJS 绑定多个 HTML 属性？答案

【问题标题】：Binding multiple HTML properties using WinJS?使用 WinJS 绑定多个 HTML 属性？
【发布时间】：2012-04-23 06:56:38
【问题描述】：

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

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

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

【问题讨论】：

标签： windows-8 microsoft-metro winjs

【解决方案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>

【讨论】：

另外，您使用绑定初始化器，其形式为：“foo: bar My.Custom.Function”。查看 WinJS.Binding.converter 以获得帮助器/包装器。

【解决方案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";
    })
});

【讨论】：

我想知道如何绑定到style['background-image'] 属性？因为在 css 中它将使用 url 函数，即。 background-image: url('http://myurl.com/image.jpg') 但如何在绑定中应用此 url()？