javascript - WinJS 数据绑定(bind) : Classes and Event Binding

Question

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

我想做的几件事:

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

Answer 1

您可以绑定(bind)两组属性。

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

如果您已将 WinJS UI 控件应用到元素(通常使用 data-win-control 属性完成)，则可以使用第二组属性。您可以设置每个元素定义的属性通过在应用控件时添加的 winControl 属性进行控制。例如，如果您想在 ListView 中绑定(bind) 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!") }
}

然后绑定(bind)到你感兴趣的事件对应的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,
    })
}

然后在observable对象上使用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");
    }
});

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