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方法并应用干净的数据。

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

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

1 个答案: