windows-8 - 如何在 WinJS 模板中动态显示/隐藏 div

Question

我有一个 Windows 8 应用程序，其模板包含一个 div，我想根据data-win-control="WinJS.Binding.Template". 我没有运气就尝试了以下方法：

<div data-win-bind="visible: isMore"> ..content... </div>

其中isMore是数据绑定项的布尔属性。

我怎样才能做到这一点？我猜可见属性不存在？

Answer 1

您是对的 - 该visible属性不存在，但您可以使用 CSS 和绑定转换器控制外观。

首先，用于WinJS.Binding.converter创建一个转换器函数，将布尔值转换为 CSS 显示属性的值，如下所示：

var myConverter = WinJS.Binding.converter(function (val) {
    return val ? "block" : "none";
});

确保该功能在全球范围内可用 - 我WinJS.Namespace.define用来创建可以在全球范围内访问的这些转换器的集合。

现在您可以在数据绑定中使用转换器来控制 CSS 显示属性，如下所示：

<div data-win-bind="style.display: isMore myConverter"> ..content... </div>