如何使用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，我强烈推荐它。