Knockout: ¿Cómo puedo alternar la visibilidad de múltiples divs al hacer clic en un botón?

Question

Quiero alternar la visibilidad de múltiples divs usando knockout. Debajo está la idea aproximada de mi problema -

<button>Button 1</button> 
<button>Button 2</button> 
<button>Button 3</button> 

<div> Div 1 </div> 
<div> Div 2 </div> 
<div> Div 3 </div> 

Por defecto, 'Div 1' debería estar visible.

Cuando hago clic en botones individuales, debería mostrar solo los divs relacionados en función de los botones en los que se hace clic.

He pasado por los ejemplos en vivo de Knockout pero no obtengo cómo hacerlo de manera eficiente.

Por favor ayuda!

Answer 1

Lo siguiente hará un trabajo para usted. No es ideal, pero debería darte una plataforma para trabajar.

En primer lugar, todo en Knockout está vinculado a un modelo de vista. Desea poder controlar la visibilidad de 3 divs, así que aquí hay un modelo de vista que podría ser adecuado. Como dije, no es perfecto :)

var buttonVm = new function(){ 
    var self = this; 
    // Flags for visibility 
    // Set first to true to cover your "first should be open" req 
    self.button1Visible = ko.observable(true); 
    self.button2Visible = ko.observable(false); 
    self.button3Visible = ko.observable(false); 

    self.toggle1 = function(){ 
    self.button1Visible(!self.button1Visible()); 
    } 

    self.toggle2 = function(){ 
    self.button2Visible(!self.button2Visible()); 
    } 

    self.toggle3 = function(){ 
    self.button3Visible(!self.button3Visible()); 
    } 

} 

Tendrá que cambiar su margen de beneficio a: -

<!-- events here. When clicked call the referenced function --> 
<button type="button" data-bind="click: toggle1">Button 1</button> 
<button type="button" data-bind="click: toggle2">Button 2</button> 
<button type="button" data-bind="click: toggle3">Button 3</button> 

<!-- Visibility set here --> 
<div data-bind="visible: button1Visible"> Div 1 </div> 
<div data-bind="visible: button2Visible"> Div 2 </div> 
<div data-bind="visible: button3Visible"> Div 3 </div> 

Un par de cosas a tener en cuenta aquí. Primero, agregué el atributo tipo. Sin él, el comportamiento predeterminado del botón será intentar enviar su formulario.

Haciendo nudos: -

// Create view model 
var vm = new buttonVm(); 
ko.applyBindings(vm);