Loại bỏ: Làm cách nào để chuyển đổi chế độ hiển thị của nhiều div trên nhấp chuột vào nút?

Question

Tôi muốn chuyển đổi mức hiển thị của nhiều div bằng cách loại trực tiếp. Dưới đây là ý tưởng thô về vấn đề của tôi -

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

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

Theo mặc định, 'Div 1' sẽ hiển thị.

Khi tôi nhấp vào các nút riêng lẻ, nó sẽ chỉ hiển thị các div liên quan dựa trên các nút được nhấp.

Tôi đã trải qua các ví dụ trực tiếp Knockout nhưng không nhận được cách thực hiện điều này một cách hiệu quả.

Vui lòng trợ giúp!

Answer 1

Sau đây sẽ thực hiện công việc cho bạn. Nó không phải là lý tưởng, nhưng nên cung cấp cho bạn một nền tảng để làm việc trên.

Đầu tiên, mọi thứ trong Knockout được gắn với mô hình chế độ xem. Bạn muốn có thể kiểm soát khả năng hiển thị của 3 div, vì vậy đây là mô hình xem có thể phù hợp. Như tôi đã nói, không hoàn hảo :)

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

} 

Bạn sẽ cần phải thay đổi đánh dấu của bạn để: -

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

Vài điều cần lưu ý ở đây. Trước tiên, tôi đã thêm thuộc tính loại. Nếu không có nó, hành vi mặc định của nút sẽ là thử và gửi biểu mẫu của bạn.

Ràng buộc tất cả lên: -

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