SPA - поиск html table

Question

Я создаю одностраничное приложение, в котором у меня есть html-таблица, и мне нужно реализовать окно поиска, которое проходит по строкам таблицы и скрывает те, которые не совпадают с поиском -box текст. Проблема заключается в том, что будучи SPA, все javascript-коды, которые я нашел в Интернете, которые делают эту вещь, основываются на $ (document) .ready (function(), поэтому он не работает. Я пробовал использовать следующий подход:

в моих viewmodel.js я есть:

function filter2(search, tblData) { 

     window.phrase = document.getElementById(search).value; 

     var words = window.phrase.toLowerCase().split(" "); 
     var table = document.getElementById(tblData); 
     var ele; 
     for (var r = 1; r < table.rows.length; r++) { 
      ele = table.rows[r].innerHTML.replace(/<^>+>/g, ""); 
      var displayStyle = 'none'; 
      for (var i = 0; i < words.length; i++) { 
       if (ele.toLowerCase().indexOf(words[i]) >= 0) 
        displayStyle = ''; 
       else { 
        displayStyle = 'none'; 
        break; 
       } 
      } 
      table.rows[r].style.display = displayStyle; 
     } 

    } 

и в моем view.html:

<input type="text" id="search" placeholder="Search..." data-bind="click: filter2"/> 

, где tblData это мой HTML таблицы и поиск мой SearchBox Это не работает, если кто-нибудь. имеет любую идею, пожалуйста, поделитесь. Спасибо заранее.

EDIT: Это HTML для моего стола:

<table id="tblData"class="table table-striped" > 
     <thead> 
      <tr><th>Domain Name</th><th>Full name</th><th style="text-align:center">Email</th></tr> 
     </thead> 
     <tbody data-bind="foreach: employee"> 
      <tr> 
       <td style="width:100px" data-bind="text: username"></td> 
       <td style="width:120px"data-bind="text: fullName"></td> 
       <td style="text-align:right;width:120px" data-bind="text: email"></td> 
      </tr> 
     </tbody> 
    </table> 

Answer 1

Не делать ванильное JavaScript манипуляции DOM, если вы используете нокаут. Фильтрация довольно проста, вам просто нужно сохранить наблюдаемый массив всех ваших элементов и объявить вычисленное значение, которое возвращает отфильтрованные элементы. Для простого примера см эту модель:

function Model() { 
    var self = this 
    this.input = ko.observable(""); 
    this.all = ko.observableArray(["John","James","Mark"]); 
    this.filtered = ko.computed(function() { 
     return ko.utils.arrayFilter(self.all(), function(item) { 
      return item.indexOf(self.input()) !== -1; 
     }); 
    }); 

} 

с этим HTML:

<input placeholder="Type to filter" data-bind="value: input, valueUpdate: 'keyup'"/> 
<ul data-bind="foreach: filtered"> 
    <li data-bind="text: $data"></li> 
</ul> 

Вы можете проверить его здесь: http://jsfiddle.net/qFYbW/1/