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

我有一个包含一个模板的 Windows 8应用程序,该模板包含一个基于data-win-control =“Winjs.Binding.Template”中的属性值显示或隐藏的div.我没有运气尝试过以下的事情：

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

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

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

你是对的 – 可见属性不存在,但您可以使用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>