नॉकआउट: मैं बटन क्लिक पर एकाधिक divs की दृश्यता टॉगल कैसे करूं?

Question

मैं नॉकआउट का उपयोग करके एकाधिक divs की दृश्यता टॉगल करना चाहता हूं। नीचे मेरी समस्या का कोई अंदाजा विचार है -

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

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

डिफ़ॉल्ट रूप से, 'Div 1' दिखाई देना चाहिए।

जब मैं अलग-अलग बटन क्लिक करता हूं तो इसे क्लिक किए गए बटनों के आधार पर केवल संबंधित divs प्रदर्शित करना चाहिए।

मैं नॉकआउट लाइव उदाहरणों से गुज़र चुका हूं लेकिन यह कुशलतापूर्वक कैसे करना है।

कृपया मदद करें!

Answer 1

निम्नलिखित आपके लिए नौकरी करेगा। यह आदर्श नहीं है, लेकिन आपको काम करने के लिए एक मंच देना चाहिए।

सबसे पहले, नॉकआउट में सब कुछ एक दृश्य मॉडल से जुड़ा हुआ है। आप 3 divs की दृश्यता को नियंत्रित करने में सक्षम होना चाहते हैं, इसलिए यहां एक दृश्य मॉडल है जो उपयुक्त हो सकता है। जैसा कि मैंने कहा, सही नहीं :)

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

} 

आप करने के लिए अपने मार्कअप को बदलना होगा: - यहाँ नोट करने के लिए

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

चीजों की युगल। सबसे पहले, मैंने टाइप विशेषता जोड़ा है। इसके बिना, बटन का डिफ़ॉल्ट व्यवहार आपके फॉर्म को आजमाने और सबमिट करना होगा।

यह सब मिलाकर अप: -

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