使用類型模型填充時過濾可觀察陣列

Question

我正在創建一個電子商務網站，並且我有一個類型產品模型，它包含我的客戶希望銷售的每個產品的所有信息。該產品模型被推送到一個可觀察的數組，通過foreach顯示在屏幕上。這一切工作正常。

我希望有控件，如複選框/單選按鈕，它們將過濾屏幕上的數組。例如通過顏色或大小。閱讀教程時，如果處理數字或單詞的線性數組，這很簡單。我很難翻譯這個模型。我想選擇顏色爲紅色，然後可觀察數組將過濾到數組中的product.color = red。

任何幫助將不勝感激。

Answer 1

對於我們這些想要幫助的人來說，更好地瞭解你想要做什麼會是非常有用的。請在未來提問時分享您的代碼，因爲這有助於我們更好地幫助您，並減少我們的猜測。無論哪種方式，我繼續並創建一個jsfiddle來演示我認爲你可能要做的事情。

http://jsfiddle.net/9cVjv/2/

該演示採用淘汰賽computables處理過濾。可計算是由某個給定函數計算的可觀測量。在我的示例中，我只是使用基本的JS數組函數執行一些過濾（使用ko.utils功能可能更好，但我希望對不熟悉基因敲除的人保持清楚）。

JS：

function FilterViewModel() { 
    var self = this; 

    self.products = ko.observableArray([ 
     { name: 'widget', color: 'blue', size: 'large' }, 
     { name: 'wigglit', color: 'red', size: 'large' }, 
     { name: 'gadget', color: 'yellow', size: 'small' }, 
     { name: 'wadget', color: 'blue', size: 'large' }, 
     { name: 'wizzle', color: 'blue', size: 'small' }, 
     { name: 'fizzle', color: 'green', size: 'small' }, 
     { name: 'gigglit', color: 'blue', size: 'small' }, 
     { name: 'fidget', color: 'red', size: 'large' }, 
     { name: 'midget', color: 'red', size: 'large' }, 
     { name: 'madget', color: 'blue', size: 'large' }, 
    ]); 
    self.selectedColor = ko.observableArray(''); 
    self.selectedSize = ko.observable(''); 

    self.filteredProducts = ko.computed(function() { 
     return self.products().filter(function (value) { 
      var isInSet = true; 

      // if the size doesn't match, don't include this one 
      if(self.selectedSize() != '' && self.selectedSize() != null && 
       self.selectedSize() != value.size) 
       isInSet = false; 

      // if the colors don't match, don't include this one 
      if(self.selectedColor() != '' && 
       self.selectedColor() != null && 
       self.selectedColor() != value.color) { 
        isInSet = false; 
      } 

      return isInSet; 
     }); 
    }); 

    self.colorOptions = ko.computed(function() { 
     var colorChoices = self.products().map(function(value) { 
      return value.color; 
     }).filter(function(elem, pos, self) { 
      return self.indexOf(elem) == pos; 
     }); 

     //combine a blank choice and the colors from products 
     return (['']).concat(colorChoices); 
    }); 
    self.sizeOptions = ko.computed(function() {  
     var sizeChoices = self.products().map(function(value) { 
      return value.size; 
     }).filter(function(elem, pos, self) { 
      return self.indexOf(elem) == pos; 
     }); 

     //combine a blank choice and the sizes from products 
     return (['']).concat(sizeChoices); 
    }); 
} 

var viewModel = new FilterViewModel(); 
ko.applyBindings(viewModel); 

HTML：

<div class="blockItem"> 
    <p>Color: 
     <select data-bind="options: colorOptions, value: selectedColor"></select> 
    </p> 
    <p>Size: 
     <select data-bind="options: sizeOptions, value: selectedSize"></select> 
    </p> 
</div> 
<div class="blockItem"> 
    <p><b>PRODUCTS</b></p> 
    <!-- ko foreach: filteredProducts --> 
     <p class="blockItem"> 
      <b>Name:</b> <span data-bind="text: $data.name"></span>, 
      <b>Color:</b> <span data-bind="text: $data.color"></span>, 
      <b>Size:</b> <span data-bind="text: $data.size"></span> 
     </p> 
    <!-- /ko --> 
</div> 

CSS：

.blockItem { 
    border: 2px black solid; 
    padding: 2px; 
} 

Answer 2

您可以使用ko.utils函數來過濾您的數組，該頁面上的示例只有一個過濾器。如果你想擴展這個在不同領域進行過濾，那就不會太難，但是正如Aeolos在評論中所說的那樣，我們需要你發佈一些代碼來幫助解決這個問題。

但是，考慮平底船，你可以創建一個過濾器對象，包含字段名稱進行篩選反對，過濾器值，和每個活性物質過濾器添加到過濾器的observableArray：

//filter the items using the filter text 
viewModel.filteredItems = ko.computed(function() { 
    if (filters().length === 0) { 
     return this.items(); 
    } else { 
     var results = this.items(); 
     for(var i = 0; i < filters().length; i++) 
     { 
      var filter = filters()[i]; 
      results = ko.utils.arrayFilter(results, function(item) { 
      return ko.utils.stringStartsWith(item[filter.name]().toLowerCase(), filter.value); 
      }); 
     } 
     return results; 
    } 
}, viewModel); 

這ISN在任何方面都沒有經過測試，但它可能會讓你知道該怎麼做。