title: bind array data to view model- knockout.js
body: <p>The view model has an observable array <strong>simpleSearchResultsArray</strong> which gets filled on click of <strong>bind data 1 button.</strong>  The am applying binding at document load. When i click on the button, the view model gets updated, but not the view.</p>
  
  <p>Here is the view code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead id="resultTableHeader"&gt;
          &lt;tr style="text-align: center" data-bind="foreach: columns"&gt;
              &lt;th style="text-align: center; height: 23px;" data-bind="visible: checked, text: header"&gt;
              &lt;/th&gt;
           &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="resultTableBody" data-bind="foreach: simpleSearchResultsArray"&gt;
          &lt;tr&gt;
              &lt;td style="text-align: center; vertical-align: middle;"&gt;
                  &lt;span data-bind="text: $index()+1"&gt;&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; vertical-align: middle;"&gt;
                  &lt;span data-bind="text: jobName"&gt;&lt;/span&gt;
               &lt;/td&gt;
               &lt;td style="text-align: center; vertical-align: middle;"&gt;
                  &lt;span data-bind="text:qName"&gt;&lt;/span&gt;
               &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button id="bindData1"&gt;bind data 1&lt;/button&gt;
  &lt;button id="bindData2"&gt;bind data 2&lt;/button&gt;
  </code></pre>
  
  <p>The view model codE:</p>
  
  <pre><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 and data2 to consider as info from service 
          var data1=  [{jobName: 'a', documentName: 'Quote1'},{jobName: 'b', documentName: 'Quote2'}];
  
              for (var k = 0; k &lt; 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'}];
           for (var k = 0; k &lt; 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();
      });
  
  });
  </code></pre>
  
  <p>How to make the view update on click of <strong>bind data 1 button</strong> and <strong>bind data 2 button</strong>?</p>