Cómo mostrar/ocultar div en WinJS Template dinámicamente

Question

Tengo una aplicación de Windows 8 con una plantilla que contiene un div que quiero mostrar u ocultar en función del valor de una propiedad dentro de un data-win-control="WinJS.Binding.Template". He intentado el siguiente sin suerte:

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

donde isMore es una propiedad booleana del elemento de enlace de datos.

¿Cómo puedo hacer eso? Supongo que la propiedad visible no existe?

Answer 1

Tiene razón: la propiedad visible no existe, pero puede controlar la apariencia mediante CSS y un convertidor de encuadernación.

En primer lugar, utilizar WinJS.Binding.converter para crear una función de conversión que convierte un valor lógico en un valor valor para la propiedad CSS display, así:

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

Asegúrese de que la función está disponible a nivel mundial - Yo uso WinJS.Namespace.define a crear colecciones de estos convertidores a las que pueda acceder globalmente

Ahora puede utilizar el convertidor de sus datos de unión para controlar la propiedad CSS display, así:

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