How to show/hide div in WinJS Template dynamically

Question

I have a Windows 8 app with a template that contains a div I want to show or hide based on the value of a property inside a data-win-control="WinJS.Binding.Template". I have tried the following without luck:

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

where isMore is a boolean property of the databound item.

How can I do that? I guess the visible property does not exist?

Answer 1

You are right - the visible property doesn't exist, but you can control the appearance using CSS and a binding converter.

First, use WinJS.Binding.converter to create a converter function that translates a boolean to a value value for the CSS display property, like this:

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

Make sure that the function is globally available - I use WinJS.Namespace.define to create collections of these converters that I can get to globally.

Now you can use the converter in your data binding to control the CSS display property, like this:

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