javascript - 如何将 JavaScript 对象复制到临时变量中，以便在更改属性后恢复原始对象？

Question

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

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

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

---

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

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

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 )。