Knockout: Düğme tıklamasıyla birden çok div'in görünürlüğünü nasıl değiştirebilirim?

Question

Nakavt kullanarak çoklu divların görünürlüğünü değiştirmek istiyorum. Aşağıda benim sorunumun kaba bir fikir var -

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

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

Varsayılan olarak, 'Div 1' görünmelidir.

Tek tek tıklamaları tıklattığımda, tıklatılan düğmelere göre yalnızca ilgili divleri görüntülemesi gerekir.

Knockout canlı örneklerini inceledim, ancak bunu nasıl verimli bir şekilde yapamayacağımı anlamıyorum.

Lütfen yardım edin!

Answer 1

Aşağıdakiler sizin için bir iş yapacaktır. İdeal değil, ama üzerinde çalışmak için bir platform vermelisin.

İlk önce, Knockout'daki her şey bir görünüm modeline bağlanır. 3 div'un görünürlüğünü kontrol edebilmek istiyorsanız, işte size uygun bir model sunuyoruz. Dediğim gibi, mükemmel değil Sen için işaretlemenizi değiştirmeniz gerekir :)

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

} 

: - şeylerin

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

Çift burada dikkat edilmesi gereken. İlk olarak, tip özniteliğini ekledim. Bu olmadan, düğmenin varsayılan davranışı formunuzu denemek ve göndermek olacaktır.

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