3. Фильтрация во viewModel

HTML

<script src="http://rniemeyer.github.io/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script type="text/html" id="productsInfo">
  <li>
    <a href="#change" data-bind="text: name, click: changeGender"></a>
    <span data-bind="text: count"></span>
    <span data-bind="text: cost"></span>
    <span data-bind="text: price"></span>
  </li>
</script>
<table>
  <tr valign="top">
    <td>
      <strong>All</strong>
      <div data-bind="
            template: {
            name: 'productsInfo',
            foreach: products
            }"></div>
    </td>
  </tr>
</table>
<div class="container">
  <div class='row'>
    <input type="text" id='name' placeholder="Название" class='col-md-3' />
    <input type="text" id='count' placeholder="Количество" class='col-md-3' />
    <input type="text" id='cost' placeholder="Цена" class='col-md-3' />
    <a href="#create-product" data-bind="click:createProduct" class='col-md-3'>create Product</a>
  </div>
</div>

JavaScript

var Person = function(name, count, cost, price) {
    this.name = ko.observable(name);
    this.count = ko.observable(count);
    this.cost = ko.observable(cost);
    this.price = ko.observable(price);
    this.changeGender = function() {
      var g = this.name() + 1;
      this.name(g);
    };
		};
    var viewModel = {
      genderToFilter: ko.observable('M'),
      products: ko.observableArray([]),
      createProduct: function() {
        var cname = document.getElementById("name").value;
        var ccount = document.getElementById("count").value;
        var ccost = document.getElementById("cost").value;
        var cprice = parseInt(ccount) * parseInt(ccost);
        this.products.push(new Person(cname, ccount, ccost, cprice));
    }};
    ko.applyBindings(viewModel);