Ночной наблюдаемый массив, не обновляющий UI

Question

Я звоню как WEB-сервис и получаю данные JSON. После этого, используя нокаут Js, я привязываюсь к таблице. После этого, когда пользователь вводит что-то в текст bax, он фильтрует данные и отображает их в пользовательском интерфейсе. Но в настоящее время он не работает. Пожалуйста, найдите код ниже.

<script src="../../Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/knockout-3.3.0.js"></script> 
@{ 
    ViewBag.Title = "AllTasks"; 
} 

<script type="text/javascript"> 
    var viewModel; 
    var url = 'http://localhost:22653/api/AllTasks'; 
    $(document).ready(function() { 
     debugger; 
     var FAJobViewModel = function() { 
      var self = this; 
      self.Parameters = ko.observableArray(); 
      var AllTask = JSON.parse(readJSON(url)); 
      function readJSON(file) { 
       var request = new XMLHttpRequest(); 
       request.open('GET', file, false); 
       request.send(null); 
       if (request.status == 200) 
        return request.responseText; 
      }; 
      self.Parameters = ko.observableArray(AllTask); 


      self.query = ko.observable(''); 
      self.search = function (value) { 
       self.JobIDParameters = ko.observableArray(); 
       debugger; 
       for (var x in AllTask) { 
        if (AllTask[x].JobNumber.toLowerCase().indexOf(value.toLowerCase()) >= 0) { 
         self.JobIDParameters.push(AllTask[x]); 
        } 
       } 
       self.Parameters = self.JobIDParameters; 

      }; 

     } 
     viewModel = new FAJobViewModel(); 
     viewModel.query.subscribe(viewModel.search); 
     ko.applyBindings(viewModel, document.getElementById("AllTask")); 
    } 
    ); 


</script> 
<div id="AllTask" class=" container-fluid" style="margin-top:50px"> 
    <span>JobId</span><input id="txtSearch" placeholder="Search…" type="search" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off"> 
    <input type="button" id="btnSearch" value="Search" " /> 
    <table border="1"> 
     <thead> 
      <tr> 
       <th>Job Id</th> 
       <th>Requestor</th> 
       <th>Test Name</th> 
       <th>Priority</th> 
       <th>CreatedDate</th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach:Parameters" class=" container-fluid"> 
      <tr> 
       <td><span data-bind="text:JobNumber"></span></td> 
       <td><span data-bind="text:Requestor"></span></td> 
       <td><span data-bind="text:TaskAbbreviation"></span></td> 
       <td><span data-bind="text:Priority"></span></td> 
       <td><span data-bind="text:CreatedDate"></span></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 1

существует проблема, где вы назначая результирующая фильтруют данные, необходимые избежать использования = и использовать () конвенции, вместо которого будет держать два способа связывания нетронутыми.

ViewModel:

self.Original= ko.observableArray(AllTask); 
self.Parameters = ko.observableArray(AllTask); 
self.search = function (value) { 
     if(!value){self.Parameters(self.Original())} 
     var arr= []; 
     ko.utils.arrayForeach(self.Original(),function(item){ 
     if (item.JobNumber().toLowerCase().indexOf(value.toLowerCase())>= 0) 
      { 
       arr.push(item); 
      } 
     }); 
      self.Parameters(arr); 
    }; 

Я сделал небольшие изменения для правильной работы. Надеюсь, это поможет .