敲除檢測是否有任何在foreach中可見

我有一個下拉菜單，由ul/li/a標籤（Bootstrap）製成，在Knockout中動態綁定。我正在爲它添加一個功能，根據您輸入的內容進行過濾，方法是設置li的可見性，如果其選擇與過濾器字符串不匹配。這工作正常，但如果他們都不匹配我想顯示某種「沒有結果」div /消息。我還沒有找到一個好方法來檢查是否所有的都不可見。敲除檢測是否有任何在foreach中可見

相關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"}, ..]

數組所以最好這將是很好對消息做出頭像visible: ddlOptions().length == 0但我只是隱藏這些鋰標籤數據實際上並沒有改變。是否有一種優雅的方式來檢查是否仍然可見？

來源

2016-05-24 DasBeasto

我會創建一個只包含過濾選項的計算數組。您正在使用$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'" />

來源

2016-05-24 13:20:22 user3297291

哇非常乾淨謝謝！出於某種原因，我沒有考慮改變我使用的原始ddlOptions，我一直試圖爲過濾後的選項添加一個新的observable或list。這好多了。 – DasBeasto

敲除檢測是否有任何在foreach中可見

回答

相關問題