Knockout: Jak przełączać widoczność wielu elementów div przy kliknięciu przycisku?

Question

Chcę przełączać widoczność wielu elementów div przy użyciu funkcji nokautu. Poniżej znajduje się przybliżony pomysł mojego problemu -

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

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

Domyślnie "Div 1" powinien być widoczny.

Po kliknięciu poszczególnych przycisków powinien być wyświetlany tylko powiązany element div oparty na klikniętych przyciskach.

Przeszedłem przez przykłady na żywo Knockout, ale nie udało mi się uzyskać tego, jak to zrobić skutecznie.

Proszę pomóc!

Answer 1

Następująca osoba wykona pracę za Ciebie. To nie jest idealne, ale powinno dać ci platformę do pracy.

Po pierwsze, wszystko w Knockout jest powiązane z modelem widoku. Chcesz móc kontrolować widoczność 3 elementów div, więc tutaj jest model widoku, który może być odpowiedni. Tak jak mówiłem, nie jest doskonały :)

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()); 
    } 

} 

Musisz zmienić znaczników do: -

<!-- 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> 

kilka rzeczy, aby pamiętać tutaj. Najpierw dodałem atrybut typu. Bez tego domyślnym zachowaniem przycisku będzie próba przesłania formularza.

Wiązanie to wszystko: -

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