將數組數據綁定到視圖模型 - knockout.js

Question

視圖模型有一個可觀察數組simpleSearchResultsArray它獲取填充點擊綁定數據1按鈕。我在文件加載時應用綁定。當我點擊按鈕時，視圖模型得到更新，但不是視圖。

這裏是視圖代碼：

<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> 

視圖模型代碼：

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 < 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 < 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(); 
    }); 

}); 

如何做出綁定數據1個按鈕和綁定數據2點擊按鈕的視圖更新？

Answer 1

用div包裹整個html。

並修改JS是這樣的：

$(document).ready(function() { 
    QuoteSimpleSearchVMObj = new QuoteSimpleSearchVM(); 
    ko.applyBindings(QuoteSimpleSearchVMObj, document.getElementById("myDiv")); 

}); 

和HTML這樣：

<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> 

見your other question有關刷新問題，並替換：

self.simpleSearchResultsArray = ko.observableArray([]); 
self.simpleSearchResultsArray = ko.observable(temparray); 

通過：

self.simpleSearchResultsArray(temparray); 

我希望它有幫助。

Answer 2

該問題似乎源於您用observablearray和observable覆蓋了ObservableArray。

self.UpdateData = function(){ 
    self.simpleSearchResultsArrayremoveAll(); // *** clear the array *** 

    var data2= [{jobName: 'c', documentName: 'Quote2'},{jobName: 'd', documentName: 'Quote4'}]; 
    for (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; 

    simpleSearchResultsArrayremoveAll.push(temp); // *** Add to the array *** 
    } 
    alert(2); 
}; 

你會做同樣的其他功能：

這一個的jsfiddle（http://jsfiddle.net/TpSny/1/）爲我工作。