使用类型模型填充时过滤可观察阵列

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在任何方面都没有经过测试，但它可能会让你知道该怎么做。