如何使用knockoutjs單擊綁定創建一個漢堡包菜單

Question

我目前的回購https://github.com/matosb2/P5

我希望能夠重構使用knockoutjs代替jQuery的這個特殊的代碼。我會如何去做這件事？

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

我知道有我的項目的其他部分的功能錯誤，但現在我只想專注於此。請隨時看我的回購作參考。

Answer 1

您有三個DOM元素。其中兩個會有點擊綁定，一個會有一個css綁定。你有一個變量表示抽屜是否打開，用在CSS綁定中。點擊綁定控制其值。至於淘汰賽而言，它只是這個：

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>

如果您還沒有通過Knockout tutorial，我強烈推薦它。