取消时从 ajax 恢复为第一次加载值

Question

基本上我在同一页面中有一个显示视图（使用跨度）和一个编辑视图（使用输入），用户一次只能看到显示或编辑视图。

显示视图 -> 编辑按钮
编辑视图 -> 保存按钮/取消按钮

当用户单击取消按钮时，页面将从编辑视图更改为显示视图，其中包含从 ajax 调用加载的数据。

我的问题是：
如何保存第一个加载的 ajax 调用值并在单击取消按钮时将其取回。

条件：
1) 不再调用 ajax 来取回值
2）解决方案应该是通用的并且足够好，可以在大多数类似的情况下重复使用

我相信这是许多开发人员面临的常见问题。

function MyViewModel() {
  var self = this;
  self.FirstName = ko.observable();
  self.LastName = ko.observable();
  self.SelectedCountryID = ko.observable();
  
  self.GetInformation = function() {
    $.ajax({
      // get data and bind
    });
  }
  
  self.GetCountryInformation = function() {
    $.ajax({
      // get country data and bind to select option
    });
  }
 
  self.SaveInformation = function() {
    $.ajax({
      // post data
   });
  }
  
  self.OnCancelClick = function() {
    // cancel and revert back to first time load vale.
  }
  
  self.GetInformation();
  self.GetCountryInformation();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <!-- Display View -->
</div>

<div>
  <input type="text" data-bind="value:FirstName">
  <input type="text" data-bind="value:LastName">
  <select data-bind="options: AvailableCountries,
                       optionsText: 'CountryName',
                       value: SelectedCountryID,
                       optionsCaption: 'Choose...'"></select>
 <!-- All other input -->
</div>

Answer 1

有两个独立的 observables。保存时，您将编辑的 observable 复制到保存的 observable。取消时，您不会。

var vm = (function() {
  var self = {
    mode: ko.observable('Display'),
    savedValue: ko.observable(),
    newValue: ko.observable(),
    save: function (data) {
      console.debug("Save", data, self.newValue());
      self.savedValue(self.newValue());
      self.mode('Display');
    }
  };
  
  return self;
}())

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="visible:mode() == 'Display'">
  <span data-bind="text:savedValue"></span>
  <button data-bind="click:mode.bind(null, 'Edit')">Edit</button>
</div>
<div data-bind="visible:mode() == 'Edit'">
  <input data-bind="value:newValue" />
  <button data-bind="click:save">Save</button>
  <button data-bind="click:mode.bind(null, 'Display')">Cancel</button>
</div>