Question

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

我希望做的一些事情：

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

Answer 1

您可以绑定两组属性。

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

如果您已将WinJS UI控件应用于元素（通常使用data-win-control属性，则可以使用第二组属性。您可以通过{{1}设置每个控件定义的属性在应用控件时添加的属性。例如，如果要在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>

然后使用可观察对象上的bind方法在值更改并应用/删除类时获取通知，如下所示：

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

你可以以声明方式绑定类，但是你需要一次性设置所有类，这很少有用。如果您想采用该方法，则绑定元素上的dataSource.classes.bind("myFirstClass", function (newValue) { var elem = document.getElementById("myId"); if (newValue) { WinJS.Utilities.addClass(elem, "myFirstClass"); } else { WinJS.Utilities.removeClass(elem, "myFirstClass"); } });属性。

Answer 2

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

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

我们有代码一直设置onclick属性。将该函数作为数据源的一部分包含在内，然后进行设置。

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

2 个答案: