Jak dynamicznie pokazać/ukryć element div w szablonie WinJS

Question

Mam aplikację Windows 8 z szablonem zawierającym element div, który chcę pokazać lub ukryć na podstawie wartości właściwości wewnątrz data-win-control="WinJS.Binding.Template". Próbowałem następujące bez powodzenia:

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

gdzie isMore jest logiczna właściwość elementu z danymi.

Jak mogę to zrobić? Domyślam się, że widoczna właściwość nie istnieje?

Answer 1

Masz rację - właściwość visible nie istnieje, ale możesz kontrolować wygląd przy użyciu CSS i konwertera powiązań.

pierwsze, należy WinJS.Binding.converter aby utworzyć funkcję konwertera, który przekłada wartość logiczną na wartość wartość właściwości wyświetlacza CSS, tak:

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

Upewnij się, że funkcja jest dostępna globalnie - używam WinJS.Namespace.define do tworzyć kolekcje tych konwerterów, które mogę uzyskać na całym świecie.

Teraz można użyć konwertera w danych wiążących kontrolować właściwości wyświetlania CSS, tak:

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