2

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

我想做的几件事：

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

2 回答 2

6

您可以绑定到两组属性。

第一个是每种元素类型在 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>

添加和删​​除单个类要复杂得多。我发现最简单的方法是使用基于代码的绑定。在数据源中创建一个 observable 属性，如下所示：

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属性绑定到元素上。

于 2012-06-12T08:06:54.300 回答
0

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

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

我们有代码一直设置例如 onclick 属性。将该函数作为数据源的一部分包含在内，然后您就设置好了。

于 2012-06-11T16:48:31.423 回答