knockout.js - Knockout observable array not updating the UI -
i calling web service , json data. after using knockout js binding table.after when user type in text bax filters data , show in ui. not working. please find code below.
<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; (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>
issue exists assigning resultant filtered data need avoid using =
, use ()
convention instead keep 2 way binding intact .
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); };
i made small changes correct functionality . hope helps .
Comments
Post a Comment