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。

我还用正确的网址分配了小提琴并添加了你删除的行。

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链接。

如何使用knockoutjs映射插件对数据绑定到表？

1 个答案: