javascript - 当用户提交时更新 observableArray 中的记录，而不是自动使用 KnockoutJS

Question

我有一个在网格中呈现的 observableArray。当用户单击一行时，会弹出一个对话框，使用户能够编辑所选项目。我想让用户能够更新或取消他们的更改，但由于所选记录是可观察的，因此会立即进行更改。

如何将所选记录与 observableArray 分开，以便仅在用户单击“更新”时更新数据？

这是我的问题的简化版本 - 我的 fiddle

function Type(data) {
    this.id = data.id;
    this.name = ko.observable(data.name);
};

function Location(data) {
    this.id = data.id;
    this.name = ko.observable(data.name);
    this.state = ko.observable(data.state);
    this.headline = ko.observable(data.headline);
    this.type = ko.observable(new Type(data.type));
};

function ViewModel() {
    var self = this;

    self.types = types;
    self.locations = ko.observableArray(ko.utils.arrayMap(seedData, function(item) {
        return new Location(item);
    }));
    self.selectedLocation = ko.observable();

    self.edit = function(item) {
        self.selectedLocation(item);
    };

    self.cancel = function() {
        self.selectedLocation(null);
    };

    self.update = function(item) {
        //do something here to push updated Location to locations observableArray
    };
}

Answer 1

我认为您的结构与我在上面评论中链接的文章中描述的编辑器模式类型非常匹配:http://www.knockmeout.net/2013/01/simple-editor-pattern-knockout-js.html

对于您的数据，这意味着跟踪一个 selectedItem 和一个 selectedItemForEditing，这是一个使用所选项目的数据创建的新 Location .

如果用户取消，那么你就可以把它扔掉。如果用户接受，则您可以获取已编辑项目的数据并将其应用于原始选择的项目。

这篇文章描述了将可观察对象的创建与用数据填充它们分开，以便您始终可以使用要应用的干净数据调用 update 方法。

这是使用这些技术更新的 fiddle :http://jsfiddle.net/rniemeyer/JQkVs/