Question

我希望能够使用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绑定中使用。点击绑定控制其值。就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 tutorial，我强烈推荐它。

如何使用knockoutjs点击装订来创建汉堡包菜单

1 个答案: