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

Question

我有一个 Windows 8 应用程序，其模板包含一个我想要根据 data-win-control="WinJS.Binding.Template"内的属性值显示或隐藏的 div。我尝试了以下方法，但没有成功:

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

其中 isMore 是数据绑定(bind)项的 bool 属性。

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

Answer 1

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

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

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

确保该函数全局可用 - 我使用 WinJS.Namespace.define 创建可以全局访问的这些转换器的集合。

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

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