햄버거 메뉴

Question

나의 현재의 repo를 만들 내가 대신 jQuery를의 knockoutjs를 사용하여이 특정 코드를 리팩토링 할 수 있도록하고 싶습니다 https://github.com/matosb2/P5

. 이 일을 어떻게 하죠?

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 바인딩에서 사용되는지 여부를 나타내는 변수가 하나 있습니다. 클릭 바인딩은 해당 값을 제어합니다. 지금까지 넉 아웃에 관한 한, 그냥이 : 당신이 Knockout tutorial을하지 않은 경우

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>

, 내가보기 엔 그것을하는 것이 좋습니다.