Как упорядочить привязку данных к таблице с помощью плагина отображения 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(); 

EDIT:

Чтобы исправить сортировки, вам необходимо изменить свои функции сортировки вызвать наблюдаемые значения и не наблюдаемой функции. Как из:

Выдержка из 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 ссылка.