如何动态显示/隐藏WinJS模板中的div

Question

我有一个带有模板的Windows 8应用程序，该模板包含我想根据data-win-control="WinJS.Binding.Template"内的属性值显示或隐藏的div。我没有运气就试过以下内容：

<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>