Question

我有一个selectedCustomer（customer）observable，其中customer有3个属性：Fname，LName，Age。

我将这3个属性数据绑定到三个文本输入，并允许用户编辑它们。如何取消更改并将这三个属性恢复为原始状态？

我能够使用以下方法克隆它：

var custCache = ko.observable（ko.mapping.toJS（customer））;

我不想像下面那样进行手动映射，因为当你的对象有很多属性和其他对象的数组时，这会很麻烦。

selectedCustomer().Fname = custCache().Fname;
selectedCustomer().Lname = custCache().Lname;
selectedCustomer().Age= custCache().Age;

那么当用户取消更改时，如何将值重新放回客户对象？如何循环这些属性并将其复制过来？

谢谢，凯文

Answer 1

Ryan Niemeyer撰写了关于此主题的文章here

然而，另一种常见方法是创建knockout extender。

它是这样的：

ko.extenders.revertable = function(obs, option) {
  // Change this if you want to use something other than _.clone
  // as your clone function
  var cloneFn = _.clone;

  obs.originalValue = cloneFn(obs());
  obs.silentUpdate = ko.observable(false);
  obs.isDirty = ko.observable(false);

  obs.revert = function() {
    obs.silentUpdate(true);
    obs(cloneFn(obs.originalValue));
    obs.silentUpdate(false);
    obs.isDirty(false);
  };

  obs.update = function(value) {
    obs.silentUpdate(true);

    if (_.size(arguments) > 0) {
      obs(value);
    }

    obs.originalValue = cloneFn(obs());
    obs.silentUpdate(false);
    obs.isDirty(false);
  };

  obs.subscribe(function(newValue) {
    if (!ko.unwrap(obs.silentUpdate)) {
      obs.isDirty(true);
    }
  });

  return obs;
}

我在我的示例中使用了下划线，但如果您未在项目中使用下划线，则可以自定义它。

像这样使用：

var myValue = ko.observable('original');
myValue = myValue.extend({ revertable: {} });

myValue('updated');
myValue.revert();

console.log(myValue()); // logs 'original'

Answer 2

在构建数据时制作两个可观察对象：

originalSelectedCustomer = ko.observable(customer);
selectedCustomer = ko.observable(customer);

将第二个绑定到控件，以便反映用户输入。

如果取消，您可以使用以下内容重置值：

selectedCustomer(originalSelectedCustomer());

如果他们接受，请将selectedCustomer中的数据保存到您的存储空间。

您应该将客户对象的内部属性设置为所有可观察对象。

淘汰赛还原变革

2 个答案: