title: Filter knockout observable array
body: <p>In my current project i am using an underscore filter which works on my fiddle but doesnt work for my current project, what I would like to do is use a knockout filter instead but i am not sure how to do so.</p>
  
  <p>here is what i have using an underscore filter</p>
  
  <p>html</p>
  
  <pre><code>&lt;div data-bind="foreach: items"&gt;
  &lt;div class="profile" data-bind="text: name, click: $parent.clicked, enable: active,  css:{highlight: active()}"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  &lt;h2&gt;Selected Card&lt;/h2&gt;
  &lt;div data-bind="foreach: selectedItems"&gt;
  &lt;div data-bind="text: name"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;input type="button" data-bind="click: save" value="Save"&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.profile {
  width: 50px;
  height: 80px;
  color: black;
  background-color:silver;
  border: 1px solid black;
  float: left;
  line-height:80px;
  text-align: center;    
  margin: 2px;
  }
  .highlight {
  background: yellow !important;
  border:1px solid #000;
  color: black;
  }
  </code></pre>
  
  <p>javascript </p>
  
  <pre><code> function Card(number) {
  this.active = ko.observable(false);
  this.name = ko.observable(number);
  }
  
  var model = function () {
  var cards = [1, 2, 3, 5, 8, 13, 20, 40, 100];
  for (var i = 0 ; i &lt; cards.length ; i++)
      cards[i] = new Card(cards[i]);
  var items = ko.observableArray(cards)
  var selectedItems = ko.computed(function () {
      return _.filter(items(), function (item) {
          return item.active();
      });
  })
  
  var clicked = function (item) {
      items().forEach(function (item) { item.active(false) });
      item.active(!this.active());
  };
  
  var save = function () {
      alert("sending items \n" + ko.toJSON(selectedItems()));
  }
  
  return {
      items: items,
      selectedItems: selectedItems,
      save: save,
      clicked: clicked
  }
  }
  
  
  
  ko.applyBindings(model);
  </code></pre>
  
  <p>and here is the fiddle <a href="http://jsfiddle.net/grahamwalsh/6RnXM/" rel="nofollow">http://jsfiddle.net/grahamwalsh/6RnXM/</a></p>