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());

除非我尝试在聚焦时隐藏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需要在限定时间内发生。另一种方法是绑定到mousedown，而不是click

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

隐藏元素时，Knockout单击绑定不起作用

1 个答案: