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

我有一个Windows 8应用程序，其模板包含一个div，我想根据

data win control=“WinJS.Binding.template”

中的属性值显示或隐藏该div。我尝试过以下方法，但运气不佳：

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

。内容。。。

其中，

isMore

是数据绑定项的布尔属性

---

我该怎么做？我猜visible属性不存在？

你说得对-visible属性不存在，但是你可以使用CSS和绑定转换器来控制外观

首先，使用

WinJS.Binding.converter

创建一个转换函数，将布尔值转换为CSS显示属性的值，如下所示：

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

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

确保该函数是全局可用的-我使用

WinJS.Namespace.define

创建这些转换器的集合，以便全局访问

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

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

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

。内容。。。

更好的做法是将显示样式设置为“初始”而不是“块”，这样它也可以用于

span

元素。我使用display:none属性。。已从元素中删除数据，但存在显示为空白的元素。。。默认情况下，它采用第一行的大小。