使用KnockoutJS过滤表格

Question

我正在加载商店列表，我想添加一个过滤器输入，当我开始输入时，它会过滤表数据。我有显示数据的代码，但不知道如何构建过滤器。有人可以链接到教程解释这个或至少让我开始？代码可以在CodePen http://codepen.io/jrock2004/pen/rVQaGM

中看到

玉

block content
.container(role="main")
.row
  .col-md-12
    div.col-md-1
      span Filter:
    div.col-md-3
      input.form-control
    div.col-md-12.store-table
      table.table.table-bordered.table-striped.table-condensed
        thead
          tr
            th Store Store Name
            th Wiki Locations
            th DB Locations
            th Sites
        tbody(data-bind="foreach:stores")
          tr
            td(data-bind="text: store_name")
            td
              ul
                li
                  a(data-bind="attr: { href: store_wiki_folder }") Store Folder
                li
                  a(data-bind="attr: { href: store_wiki_contact }") Contact Folder
                li
                  a(data-bind="attr: { href: store_wiki_access }") Access Folder
            td(data-bind="text: store_db")
            td
              dl(data-bind="foreach: sites")
                dt(data-bind="text: label")
                dd
                  a(data-bind="attr: { href: label_link }, text: label_link", target="_blank")
                  a(data-bind="attr: { href: special_link }, text: special_label", target="_blank")

JS

var storeObj = [
{
"store_name": "Aber",
"store_wiki_folder": "#F",
"store_wiki_contact": "#C",
"store_wiki_access": "#A",
"store_db": "db:127.2.3.1:9000",
"sites": [{
  "label": "Prod",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}, {
  "label": "Train",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}]
},
{
"store_name": "Acad",
"store_wiki_folder": "#F",
"store_wiki_contact": "#C",
"store_wiki_access": "#A",
"store_db": "db:127.2.3.1:9000",
"sites": [{
  "label": "Live",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}, {
  "label": "Test",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}]
},
{
"store_name": "Bear",
"store_wiki_folder": "#F",
"store_wiki_contact": "#C",
"store_wiki_access": "#A",
"store_db": "db:127.2.3.1:9000",
"sites": [{
  "label": "Prod",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}, {
  "label": "Train",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}]
},
{
"store_name": "Cool Kids",
"store_wiki_folder": "#F",
"store_wiki_contact": "#C",
"store_wiki_access": "#A",
"store_db": "db:127.2.3.1:9000",
"sites": [{
  "label": "Prod",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}, {
  "label": "Train",
  "label_link": "http://google.com",
  "special_label": "[Admin]",
  "special_link": "http://images.google.com"
}]
},
];

var storesModel = ko.mapping.fromJS(storeObj);
ko.applyBindings({
stores: storesModel
});