淘汰赛检测 foreach 中是否可见

Question

我有一个下拉菜单，由 ul/li/a 标签 (Bootstrap) 组成，在 Knockout 中动态绑定。我正在向它添加一个功能，以根据您输入的内容进行过滤，如果它的选择与过滤器字符串不匹配，则通过设置 li 的可见性。这很好用，但如果它们都不匹配，我想显示某种“无结果”div/消息。我还没有找到一个好方法来检查是否所有内容都不可见。

相关JS：

self.filteredOptions = function (e) {
    return $(e).find("a").text().toLowerCase().startsWith(self.filterString());
}

相关 HTML：

<ul data-bind="foreach: ddlOptions">
    <li data-bind="visible: $parent.filteredOptions($element)">
        <a href="#" data-bind='event:{ click: function(){ $parent.Selection(Option)}}, attr:{"data-value": ID}, text: Option'></a>
    </li>
</ul>
<div> **If dropdown empty make this appear** </div>

ddlOptions 是一个对象数组，例如 [{ID : "123", Option: "option1"}, ..]

因此，理想情况下，在消息 div 上执行visible: ddlOptions().length == 0 之类的操作会很好，但我只是隐藏了那些数据实际上并没有改变的 li 标签。有没有一种优雅的方法来检查是否仍然可见？

Answer 1

我将创建一个仅包含过滤选项的计算数组。您使用$element 获取文本的方式在我看来有点倒退……（或者还有其他要求吗？）

var vm = function() {

  this.options = ko.observableArray([{
    ID: "123",
    Option: "Option1"
  }]);

  this.filterString = ko.observable("");

  this.filteredOptions = ko.computed(function() {

    var originalOptions = this.options();
    var filterString = this.filterString().toLowerCase();

    if (!filterString) {
      return originalOptions;
    }

    return originalOptions.filter(function(option) {
      return option.Option
        .toLowerCase()
        .indexOf(filterString) === 0;
    });


  }, this);

};

ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: filteredOptions">
  <li data-bind="text: Option"></li>
</ul>
<div data-bind="visible: !filteredOptions().length">No matches</div>

<input data-bind="value: filterString, valueUpdate: 'keyup'" />