bind array data to view model- knockout.js -

the view model has observable array simplesearchresultsarray gets filled on click of bind data 1 button. applying binding @ document load. when click on button, view model gets updated, not view.

here view code:

<table>     <thead id="resulttableheader">         <tr style="text-align: center" data-bind="foreach: columns">             <th style="text-align: center; height: 23px;" data-bind="visible: checked, text: header">             </th>          </tr>     </thead>     <tbody id="resulttablebody" data-bind="foreach: simplesearchresultsarray">         <tr>             <td style="text-align: center; vertical-align: middle;">                 <span data-bind="text: $index()+1"></span>             </td>             <td style="text-align: center; vertical-align: middle;">                 <span data-bind="text: jobname"></span>              </td>              <td style="text-align: center; vertical-align: middle;">                 <span data-bind="text:qname"></span>              </td>         </tr>     </tbody> </table> <button id="binddata1">bind data 1</button> <button id="binddata2">bind data 2</button> 

the view model code:

function simplesearchresults() {     var self = this;     self.index = ko.observable();     self.jobname = ko.observable();     self.qname = ko.observable(); };  function quotesimplesearchvm() {     var self = this;     self.simplesearchresultsarray = ko.observablearray([]);     self.gridoptions = {         columns: [{             header: 'index',             datamember: 'index',             checked: ko.observable(true)         }, {             header: 'job name',             datamember: 'jobname',             checked: ko.observable(true)         }, {             header: 'quote name',             datamember: 'qname',             checked: ko.observable(true)         }]     };      self.search = function (num) {         var temparray = [];          // data1 , data2 consider info service          var data1=  [{jobname: 'a', documentname: 'quote1'},{jobname: 'b', documentname: 'quote2'}];              (var k = 0; k < data1.length; k = k + 1) {                 var temp = new simplesearchresults();                 temp.index = k + 1;                 temp.jobname = data1[k].jobname;                 temp.qname = data1[k].documentname;                 temparray.push(temp);             }             self.simplesearchresultsarray = ko.observablearray([]);             self.simplesearchresultsarray = ko.observable(temparray);         alert("1");     }      self.updatedata = function()     {         var temparray=[];         var data2=  [{jobname: 'c', documentname: 'quote2'},{jobname: 'd', documentname: 'quote4'}];          (var k = 0; k < data2.length; k = k + 1) {                 var temp = new simplesearchresults();                 temp.index = k + 1;                 temp.jobname = data2[k].jobname;                 temp.qname = data2[k].documentname;                 temparray.push(temp);             }             self.simplesearchresultsarray = ko.observablearray([]);             self.simplesearchresultsarray = ko.observable(temparray);         alert(2);     }; };  var quotesimplesearchvmobj; $(document).ready(function () {      quotesimplesearchvmobj = new quotesimplesearchvm();     ko.applybindings(quotesimplesearchvmobj.gridoptions, document.getelementbyid("resulttableheader"));      ko.applybindings(quotesimplesearchvmobj, document.getelementbyid("resulttablebody"));      $("#binddata1").click(function(){         quotesimplesearchvmobj.search();     });       $("#binddata2").click(function(){         quotesimplesearchvmobj.updatedata();     });  }); 

how make view update on click of bind data 1 button , bind data 2 button?

wrap whole html div.

and modify js :

$(document).ready(function () {      quotesimplesearchvmobj = new quotesimplesearchvm();     ko.applybindings(quotesimplesearchvmobj, document.getelementbyid("mydiv"));  }); 

and html way :

<div id="mydiv">     <table>         <thead id="resulttableheader" data-bind="with: gridoptions">          ...        </table>      <button data-bind="click: search">bind data 1</button>      <button data-bind="click: updatedata">bind data 2</button> </div> 

see your other question refresh issue, , replace :

self.simplesearchresultsarray = ko.observablearray([]); self.simplesearchresultsarray = ko.observable(temparray); 

by :

 self.simplesearchresultsarray(temparray); 

i hope helps.