如何使用knockoutjs映射插件將數據綁定到表上？

Question

我能夠將數據綁定到表並使用列標題進行排序。

但是，我需要能夠編輯數據，以便更新並反映在相應的表格單元格中。爲此，我需要使數據對象爲observable。

而是結合這樣的，用文字結合：

<tbody data-bind="foreach: countries"> 
<tr> 
    <td data-bind="text: name"></td> 
    <td data-bind="text: capital"></td> 
    <td data-bind="text: population"></td> 
</tr> 
</tbody> 

我需要使用value或textInput綁定來綁定。像這樣：

<tbody data-bind="foreach: countries"> 
<tr> 
    <td><input data-bind="value: name" /></td> 
    <td><input data-bind="value: capital" /></td> 
    <td><input data-bind="value: population" /></td> 
</tr> 
</tbody> 

而不是這樣做：

 $.getJSON('https://restcountries.eu/rest/v1/all', function(data){ 
      self.countries(data); 
     }); 

我這樣做：

 $.getJSON('https://restcountries.eu/rest/v1/all', function(data){ 
      var mappedData = ko.mapping.fromJS(data); 
      var array = mappedData(); 
      self.countries(array); 
     }); 

如果我試圖映射使用插件的數據，排序不工作。

如何將數據映射爲可觀察數據並仍然具有對它們進行排序的功能？

這裏是一個工作JSFiddle example：注意：我刪除了映射，因爲它打破了代碼。

Answer 1

我檢查了小提琴，你連接的映射插件是錯誤的。 github中的那個不應該是一個cdn。

刪除您添加的映射插件鏈接並將其更改爲link。

我還用正確的url分叉了小提琴，並添加了刪除的行。

var mappedData = ko.mapping.fromJS(data); 
var array = mappedData(); 

編輯：

要解決的排序，你需要改變你的排序功能調用觀察到的值，而不是觀察到的功能。像：

摘自stringSort功能：

var countryA = a[column.property].toLowerCase(), countryB = b[column.property].toLowerCase(); 

到：

var countryA = a[column.property]().toLowerCase(), countryB = b[column.property]().toLowerCase(); 

您還需要修改numberSort，dateSort和deepGet (which is used in objectSort)對於其他種類的工作。請檢查更新的小提琴的樣本更改。

JSFiddle鏈接。