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

Question

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

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

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