Javascript WinJS数据绑定：类和事件绑定

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

我希望做几件事：

基于数据源有条件地附加类名

在标记中声明事件侦听器。希望这些事件侦听器存在于数据源上，而不是某些全局函数上

---

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

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

---

我们有一些代码，可以随时设置例如onclick属性。将函数作为数据源的一部分包含进来，您就可以设置了。

您可以绑定到两组属性

第一个是DOM中每个元素类型支持的属性。因此，例如，对于

img

元素，可以绑定

src

属性来设置显示的图像。对于

输入

元素，可以绑定到

值

属性。您可以看到适用于Metro应用程序的HTML元素的完整列表

如果已将WinJS UI控件应用于元素，则第二组属性可用（这通常是通过

数据win control

属性完成的。您可以通过应用控件时添加的

winControl

属性设置每个控件定义的属性。例如，如果您想在

列表视图中绑定
itemTemplate
属性，您可以使用如下标记：

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

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

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

然后绑定到与您感兴趣的事件对应的*

属性上的

：

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

然后在可观察对象上使用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
属性