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

Question

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

有几件事情，我希望做：

1. 有条件追加基于数据源的类名。
2. 在标记中声明事件侦听器。希望这些事件监听器存在于数据源中，而不是某些全局函数。

Answer 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属性。

Answer 2

您可以通过数据绑定元素设置的任何JavaScript属性。因此，任何暴露为javascript属性的东西（基本上，除了aria属性之外的所有东西）都可以设置。

追加一个类名是有点麻烦，因为你可以设置className属性，但使用结合不追加到它。但是，您可以将所有类名称包含在一个字符串中。

我们有代码，设置例如属性的onclick所有的时间。将该功能作为数据源的一部分并设置好。