我有一个下拉菜单,由 ul/li/a 标签(Bootstrap)组成,在 Knockout 中动态绑定(bind)。我正在努力向其添加一项功能,以根据您输入的内容进行过滤,方法是设置 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 标记,数据实际上并未更改。有没有一种优雅的方法来检查是否仍然可见?
最佳答案
我将创建一个仅包含过滤选项的计算数组。您使用 $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'" />
关于jquery - knockout 检测 foreach 中是否有可见的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37413826/