如何使用knockoutjs点击绑定来创建汉堡包菜单

How to use knockoutjs click binding to create a hamburger menu

本文关键字：创建 汉堡包 菜单 绑定 何使用 knockoutjs      更新时间：2023-09-26

我的当前回购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');
});

我知道我的项目的其他部分的功能有错误，但现在我只想把重点放在这一点。

您有三个DOM元素。其中两个将有点击绑定，一个将有css绑定。有一个变量表示抽屉是否打开，在CSS绑定中使用。点击绑定控制它的值。就Knockout而言，它就是这样:

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教程，我强烈推荐你。

相关文章：