Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>For those of us trying to help, it would be very useful to get a better idea of what you're trying to do. Please share your code when asking questions in the future as this will help us assist you better and reduce our guesswork. Either way, I went ahead and created a jsfiddle to demo what I thought you might be going for.</p> <p><a href="http://jsfiddle.net/9cVjv/2/" rel="nofollow">http://jsfiddle.net/9cVjv/2/</a></p> <p>This demo uses knockout <strong>computables</strong> to handle the filtering. Computables are observables which are computed by some given function. In my example, I simply perform some filtering using base JS array functions (using <strong>ko.utils</strong> functions is probably better, but I wanted to keep this clear for people who are not familiar with knockout).</p> <p><strong>JS:</strong></p> <pre><code>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() != '' &amp;&amp; self.selectedSize() != null &amp;&amp; self.selectedSize() != value.size) isInSet = false; // if the colors don't match, don't include this one if(self.selectedColor() != '' &amp;&amp; self.selectedColor() != null &amp;&amp; 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); </code></pre> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="blockItem"&gt; &lt;p&gt;Color: &lt;select data-bind="options: colorOptions, value: selectedColor"&gt;&lt;/select&gt; &lt;/p&gt; &lt;p&gt;Size: &lt;select data-bind="options: sizeOptions, value: selectedSize"&gt;&lt;/select&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="blockItem"&gt; &lt;p&gt;&lt;b&gt;PRODUCTS&lt;/b&gt;&lt;/p&gt; &lt;!-- ko foreach: filteredProducts --&gt; &lt;p class="blockItem"&gt; &lt;b&gt;Name:&lt;/b&gt; &lt;span data-bind="text: $data.name"&gt;&lt;/span&gt;, &lt;b&gt;Color:&lt;/b&gt; &lt;span data-bind="text: $data.color"&gt;&lt;/span&gt;, &lt;b&gt;Size:&lt;/b&gt; &lt;span data-bind="text: $data.size"&gt;&lt;/span&gt; &lt;/p&gt; &lt;!-- /ko --&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>.blockItem { border: 2px black solid; padding: 2px; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload