Wie knockoutjs klicken Bindung verwenden, um ein Hamburger-Menü

Question

Mein aktueller Repo https://github.com/matosb2/P5

Ich mag würde, um diesen bestimmten Code Refactoring mit knockoutjs anstelle von jQuery zu erstellen. Wie würde ich das machen?

var menu = document.querySelector('#burgMenu'); 
var main = document.querySelector('main'); 
var drawer = document.querySelector('#drawer'); 

menu.addEventListener('click', function(e) { 
    drawer.classList.toggle('open'); 
    e.stopPropagation(); 
}); 
main.addEventListener('click', function() { 
    drawer.classList.remove('open'); 
}); 

Ich weiß, es gibt Fehler mit der Funktionalität anderer Teile meines Projekts, aber jetzt möchte ich nur auf das konzentrieren. Fühlen Sie sich frei, um mein Repo als Referenz anzusehen.

Answer 1

Sie haben die drei DOM-Elemente. Zwei von ihnen werden Klickbindungen haben und eine wird eine CSS-Bindung haben. Sie haben eine Variable, die angibt, ob die Schublade geöffnet ist und in der CSS-Bindung verwendet wird. Die Klickbindungen steuern ihren Wert. Soweit Knockout betroffen ist, ist es gerade dies:

vm = { 
 
    isOpen: ko.observable(false), 
 
    toggle: function() { 
 
    vm.isOpen(!vm.isOpen()); 
 
    }, 
 
    close: function() { 
 
    vm.isOpen(false); 
 
    } 
 
}; 
 

 
ko.applyBindings(vm);

.open { 
 
    height: 20rem; 
 
    background-color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="click: toggle">Burger Menu</div> 
 
<div data-bind="click: close">Main</div> 
 
<div data-bind="css: {open: isOpen}">Drawer</div>

Wenn Sie nicht durch die Knockout tutorial gewesen sein, ich kann es nur empfehlen.