javascript - 在 Bindinghandler 中添加/删除元素绑定(bind) - knockout

Question

您好，我创建了一个列表并将其分割并添加了分页。一切都很好，但我希望用户能够禁用分页并仅使用常规滚动。

我的 html 标记看起来有点像这个 atm。

<div data-bind="event: { mousewheel: ScrolledPagingnation }">
</div>      

我认为自定义处理程序是完成这项工作的正确工具吗？但还没有真正成功地添加/删除事件..

<div data-bind="toggleScroll: EnablePagingnation">
</div>

EnablePagingnation 只是一个可观察的 bool 值切换。如何在我的元素上添加/删除“事件对象”？也欢迎任何其他合适的方法..:)

ko.bindingHandlers.toggleScroll = {
    update: function (element, valueAccessor, allBindings) {

        var value = valueAccessor();

         if (ko.unwrap(value) === true) {
             //Pseudo Code
             element add "event: { mousewheel: ScrolledPagination }"


         } else {
              //Clean the Binding
              ko.cleanNode(element);
         }
     }
  };

Answer 1

不要使用cleanNode。曾经。

您甚至不需要绑定(bind)处理程序。只需使用事件处理程序的表达式即可。我在下面的代码片段中使用了点击事件。

vm = {
  active: ko.observable(false),
  v: ko.observable(1),
  addToV: function() {
    vm.v(vm.v() + 1);
  }
};

ko.applyBindings(vm);

#area {
  height: 10rem;
  width: 10rem;
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="area" data-bind="event: {click: active() ? addToV : null}"></div>
Activate:
<input type="checkbox" data-bind="checked: active" />
<div data-bind="text: v"></div>