javascript - 如何将 javascript 对象复制到一个临时变量中，以便在我更改它的属性后使用它来恢复我的原始对象？

Question

很难想出一个描述性的标题，但我想要实现的是:

• 我有一个绑定(bind)到表格行的 Knockout Observable。
• 我有一个编辑按钮，它向用户显示许多输入字段，这些字段也绑定(bind)到同一个可观察对象，允许用户编辑表格行中的内联值。
• 我想在用户单击“编辑”按钮时将我的可观察对象保存在一个临时变量中，以便在用户想要放弃他们的编辑时撤消更改。

如何使用 javascript 以干净的方式实现这一点？除了普通属性之外，我的对象还有方法。

---

这些是我已经知道的黑客:

• 将我的对象转换为 JSON 并返回。 (不适用于方法)
• 不同种类的“克隆”方法。 (还没有找到适合我的)
• 从服务器重新加载数据并重新映射 observable。

Answer 1

您可以使用 extender存储您的可观察对象的先前值:

ko.extenders.keepHistory = function(target, option) {
    target.subscribe(function(newValue) {
       if(!target.history) target.history = ko.observableArray();
       target.history.push(newValue);
    });
    return target;
};

用法:

var vm = function () {
    var self = this;
    this.someValue = ko.observable().extend({keepHistory: true});
}

查看此(更新) demo .

更新

好的，我已经进行了更改以实现 revert在扩展器中:

ko.extenders.keepHistory = function(target, option) {
    target.subscribe(function(newValue) {
       if (target.reverting) { target.reverting = false; return; }
       if(!target.history) target.history = ko.observableArray();
       if(!target.revert) {
           target.revert = function () {
           console.log(target.history()[target.history().length -3]);
                var previousVersion = target.history().length < 2 ? null : target.history()[target.history().length -2];
              if (!!previousVersion) {
                  target.reverting = true;
                  console.log(previousVersion);
                  target(previousVersion);
              }
           }
       }
       target.history.push(newValue);
       console.log(target.history());
    });
    return target;
};

查看最新 demo 。请注意，我使用了 ES6 clone方法(参见 this post)。