javascript - 隐藏元素时， knockout 点击绑定(bind)不起作用

Question

我有如下简化代码。我想要做的是使用从下面的 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());

除非我尝试在 focusout 上隐藏 UL，否则它会起作用。 (在 UL 中删除 visible: isSelected 以查看它是否有效)

一种解决方案是，我可以在单击 li 后隐藏 UI，但我真正想要的是即使用户未从列表中选择任何值，列表也会关闭。类似于下拉菜单的行为，但出于某些样式原因我无法使用下拉菜单。

我也不能使用像 bootstrap 或 JQueryUI 这样的库

JSFiddle link

Answer 1

这是一个可能的解决方案。我正在添加第二个可观察对象，并在 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);
  }
});

LIVE DEMO

---

上面的缺点是 mouseup 需要在时间限制内发生。另一种方法是绑定(bind)到 mousedown，而不是 click

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