KnockoutJS：使用映射更新/插入数据到视图模型

Question

我已经尝试解决这个问题已经有一段时间了。我找不到任何解决此问题的方法，但如果我错了，请纠正我。

问题： 我有来自 JSON API 的数据，带有嵌套的数组/对象结构。我使用映射最初用我的数据填充模型。为了更新这一点，我想在新数据到达时扩展模型，或者更新现有数据。

据我所知，映射选项键应该可以帮我解决这个问题，但我可能误解了映射选项的功能。

我已经把这个例子所代表的问题归结为：

var userMapping = {
    key: function(item) {
        return ko.utils.unwrapObservable(item.id);
    }
};

// JSON call replaced with values
var viewModel = {
    users: ko.mapping.fromJS([], userMapping)
};

// Should insert new - new ID?
ko.mapping.fromJS([{"id":1,"name":"Foo"}, {"id":2,"name":"Bar"}], userMapping, viewModel.users);

// Should only update ID#1 - same ID?
ko.mapping.fromJS([{"id":1,"name":"Bat"}], userMapping, viewModel.users);

// Should insert new - New ID?
ko.mapping.fromJS([{"id":3,"name":"New"}, {"id":4,"name":"New"}], userMapping, viewModel.users);

ko.applyBindings(viewModel);​

小提琴：http://jsfiddle.net/mikaelbr/gDjA7/

如您所见，第一行插入数据。都好。但是当我尝试更新时，它会替换内容。第三个映射也一样；它替换了内容，而不是扩展它。

我用错了吗？我应该在使用映射之前尝试“手动”扩展内容吗？

编辑解决方案：
我通过使用第二个辅助数组来存储所有当前模型来解决这种情况。在新数据上，我扩展了这个数组，并更新了视图模型以包含累积的项目。

更新时（在我的例子中是一个 WebSocket 消息），我遍历模型，更改了相关项目的内容，并使用 valueHasMutated() 方法将更改的值通知给 Knockout 库。

Answer 1

通过查看您的示例代码，映射插件的行为完全符合我的预期。当您在集合上调用 fromJS 时，您实际上是在告诉映射插件这是该集合的新内容。例如：

在第二行，它怎么知道你是在更新还是你只是删除了 id:2？

我找不到任何提及将数据视为简单更新的合适方法，尽管您可以添加一个。映射数组带有一些有用的方法，例如mappedIndexOf，可以帮助您找到特定的项目。如果您收到更新数据集，只需循环遍历它，找到该项目并使用对特定项目的 mapping.fromJS 调用对其进行更新。这可以很容易地推广到可重用的方法中。

Answer 2

您可以使用ko.mapping.updateFromJS() 更新现有值。但是，它不会添加新值，因此在您的实例中会出现问题。请查看下面的链接了解更多详情。

Using updateFromJS is replacing values when it should be adding them

Answer 3

是的，您应该首先将所有数据收集到一个列表或数组中，然后将映射应用于该列表。否则，您将覆盖 viewModel 中的值。