隐藏元素时，取消点击绑定不起作用

Knockout click binding not working when hiding the element

本文关键字：绑定 不起作用 取消 元素 隐藏      更新时间：2023-09-26

我的简化代码如下。我要做的是用从下面的UL LI列表中单击的值更新输入框，然后隐藏列表。

<input data-bind="value: Name, hasfocus: isSelected" />
<ul data-bind="foreach: NameList, visible: isSelected">
    <li data-bind="text: $data, click: function () { $root.Name($data); }"></li>
</ul>

视图模型
  function VM()
    {
        var self = this;
        self.isSelected = ko.observable(false);
        self.Name = ko.observable();
        self.NameList = ko.observableArray();
        self.NameList.push("A");
        self.NameList.push("B");
        self.NameList.push("C");
        self.NameList.push("D");
        self.NameList.push("E");
        self.NameList.push("F");
    }
    ko.applyBindings(new VM());

它工作，除非我试图隐藏UL聚焦。(删除可见:isSelected在UL看到它的工作)

一个解决方案是，我可以隐藏UI后点击的li，但我真正想要的是列表关闭，即使用户不选择列表中的任何值。类似于下拉菜单的行为，但由于某些样式原因，我不能使用下拉菜单。

也不能使用bootstrap或JQueryUI等库

JSFiddle链接

这是一个可能的解决方案。我正在添加第二个可观察对象，并在isSelected更改为false时引入延迟

self.isSelected = ko.observable(false);
self.isVisible = ko.observable(false);
self.isSelected.subscribe(function(val) {
  if (val) {
    self.isVisible(true);
  } else {
    setTimeout(function() {
      self.isVisible(false);
    }, 300);
  }
});

现场演示

上述方法的缺点是mouseup需要在限定时间内发生。另一种选择是绑定mousedown，而不是绑定click 

<li data-bind="text: $data, event: {mousedown: function () { $root.Name($data); }}"></li>

相关文章：