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

Question

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

我想做的一些事情:

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

Answer 1

您可以绑定两组属性.

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

如果您已将WinJS UI控件应用于元素(通常使用该data-win-control属性,则可以使用第二组属性.您可以通过winControl应用控件时添加的属性设置每个控件定义的属性.例如,如果你想itemTemplate在a中绑定属性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,
    })
}

然后在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");
    }
});

您可以以声明方式绑定类,但是您需要一次性设置所有类,这很少有用.如果你想采用那种方法,那么你绑定className元素上的属性.