如何使用 knockoutjs 映射插件对绑定到 table 的数据进行排序？

Question

我能够将数据绑定到 table 并使用列 headers 进行排序。

但是，我需要能够编辑数据，以便更新并反映在相应的 table 单元格中。为此，我需要将数据 object 设为 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

我检查了fiddle，你link编辑的地图插件是错误的。 github里面的应该不是cdn。

删除您添加的映射插件 link 并将其更改为此 link。

我还用正确的 url 分叉了 fiddle 并添加了您删除的行。

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) 才能使其他排序生效。请检查更新的 fiddle 示例更改。

JSFiddle link.

如何使用 knockoutjs 映射插件对绑定到 table 的数据进行排序？

How to sort data bind to table using knockoutjs mapping plugin?

javascript

knockout-mapping-plugin

knockout.js