WinJS 数据绑定：类和事件绑定答案

【问题标题】：WinJS Databinding: Classes and Event BindingWinJS 数据绑定：类和事件绑定
【发布时间】：2012-06-11 14:28:53
【问题描述】：

首先，在您的标记中使用 data-win-bind 属性时是否可以设置任何属性列表？

我想做的几件事：

根据数据源有条件地附加一个类名。
在标记中声明事件监听器。希望这些事件侦听器存在于数据源上，而不是某个全局函数。

【问题讨论】：

【解决方案1】：

您可以绑定两组属性。

首先是每种元素类型在 DOM 中支持的属性。因此，例如，对于img 元素，您可以绑定src 属性来设置显示的图像。对于input 元素，您可以绑定到value 属性。您可以查看可用于 Metro 应用程序的 HTML 元素的完整列表here。

如果您已将 WinJS UI 控件应用于元素（通常使用 data-win-control 属性完成），则可以使用第二组属性。您可以通过 winControl 属性设置每个控件定义的属性，该属性是在应用控件时添加。例如，如果您想将 itemTemplate 属性绑定到 ListView 中，您可以使用如下标记：

<div id="list" data-win-control="WinJS.UI.ListView"
    data-win-bind="winControl.itemTemplate: myValue"></div>

您可以使用相同的技术来设置您的事件处理程序。将回调函数定义为数据源的一部分，如下所示：

var dataSource = {
    myClickHandler: function (e) { console.log("Click!") }
}

然后绑定到你感兴趣的事件对应的on*属性：

<button data-win-bind="onclick: myClickHandler">Press Me</button>

添加和删除单个类要复杂得多。我发现最简单的方法是使用基于代码的绑定。在您的数据源中创建一个可观察的属性，如下所示：

var dataSource = {
    myClickHandler: function (e) { console.log("Click") },
    classes: WinJS.Binding.as({
        myFirstClass: true,
        mySecondClass: false,
    })
}

然后在可观察对象上使用bind方法在值发生变化时获取通知并应用/移除类，如下：

dataSource.classes.bind("myFirstClass", function (newValue) {
    var elem = document.getElementById("myId");
    if (newValue) {
        WinJS.Utilities.addClass(elem, "myFirstClass");
    } else {
        WinJS.Utilities.removeClass(elem, "myFirstClass");
    }
});

您可以以声明方式绑定类，但您需要一次性设置所有类，这很少有用。如果您想采用这种方法，则在元素上绑定 className 属性。

【讨论】：

【解决方案2】：

您可以通过数据绑定在元素上设置任何 javascript 属性。因此可以设置任何作为 javascript 属性公开的内容（基本上，除了 aria- 属性之外的所有内容）。

附加一个类名有点棘手，因为您可以设置 className 属性，但不能使用绑定附加到它。但是，您可以将所有类名包含在一个字符串中。

我们的代码一直设置例如 onclick 属性。将该函数作为数据源的一部分包含在内，然后您就设置好了。

【讨论】：