1

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

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

这是我的问题的简化版本 - 我的小提琴 

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
    };
}
4

1 回答 1

4

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

对于您的数据，这意味着跟踪 aselectedItem和 aselectedItemForEditing是Location使用所选项目的数据新创建的。

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

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

这是您使用这些技术更新的小提琴：http: //jsfiddle.net/rniemeyer/JQkVs/

于 2013-03-29T16:04:44.570 回答