9

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?

sebagomez
  • 9,501
  • 7
  • 51
  • 89
Themos Piperakis
  • 675
  • 8
  • 25

1 Answers1

14

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>
Tom Blodget
  • 20,260
  • 3
  • 39
  • 72
Adam Freeman
  • 1,184
  • 7
  • 6
  • 2
    even better would be to set the display style to "initial" instead of "block" so it can be used for `span` elements too. – philk Mar 25 '14 at 10:22
  • I use display:none property.. data removed from the element but element with blank display exist there... It takes size of first row by default. – Mihir Joshi Sep 11 '14 at 16:54