Estoy tratando de ocultar y mostrar el elemento div según el botón en el que se hace clic. if.bind y show.bind , pero ninguno de ellos funciona.

Vista:

 <div class="right" if.bind="toggleView() === true" data-bind="visible: activeTab() === 'right div'"> <p>This is a right div</p> <div data-bind="click: hideLeftDiv"> <label for="TestButton"> <svg class="ico"><use xlink:href="Content/icons/icons.svg#div" /></svg> <span>Test Button</span> </label> </div> </div> <div class="left data-bind="visible: activeTab() === 'left div'"> <p>This is a left div</p> </div>

y el código:

 import * as dialog from 'plugins/dialog'; import * as system from 'durandal/system'; import * as ko from 'knockout'; enum divs { RIGHT_DIV = "Right div", LEFT_DIV = "Letf div" } class test{ private activeTab: KnockoutObservable<divs> = ko.observable(divs.RIGHT_DIV); private toggleView: KnockoutObservable<boolean> = ko.observable(false); async activate(){ } async hideLeftDiv() { return this.toggleView(false); } }

Espero que oculte el elemento div izquierdo cuando hago clic en el botón Test div. Pero no está funcionando como se esperaba.