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

Question

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

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

isMore是数据绑定项的布尔属性。

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

- Themos Piperakis

Answer 1

你是正确的 - visible属性不存在，但你可以使用CSS和绑定转换器来控制外观。

首先，使用WinJS.Binding.converter创建一个转换器函数，将布尔值转换为CSS display属性的值，像这样：

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>

- Adam Freeman

---

甚至更好的做法是将显示样式设置为“initial”，而不是“block”，这样它就可以用于span元素。 - philk

我使用display:none属性，从元素中删除数据，但是带有空白显示的元素仍然存在。它默认占据第一行的大小。 - Mihir Joshi