Как динамически отображать/скрывать div в шаблоне WinJS

У меня есть приложение для Windows 8 с шаблоном, содержащим div, который я хочу показать или скрыть в зависимости от значения свойства внутри data-win-control="WinJS.Binding.Template". Я пробовал следующее без везения:

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

где isMore — логическое свойство элемента с привязкой к данным.

Как я могу это сделать? Я предполагаю, что свойство visible не существует?


winjs windows-8
person Themos Piperakis    schedule 17.05.2012    source источник

Ответы (1)


arrow_upward
14
arrow_downward

Вы правы - свойства visible не существует, но вы можете управлять внешним видом с помощью CSS и конвертера привязок.

Во-первых, используйте WinJS.Binding.converter для создания функции преобразования, которая переводит логическое значение в значение свойства отображения CSS, например:

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>
person Adam Freeman    schedule 19.05.2012
comment
еще лучше было бы установить начальный стиль отображения вместо блочного, чтобы его можно было использовать и для span элементов. - person philk; 25.03.2014
comment
Я использую свойство display:none.. данные удалены из элемента, но там существует элемент с пустым отображением... По умолчанию он занимает размер первой строки. - person Mihir Joshi; 11.09.2014