淘汰赛将视图模型重置为原始数据答案

【问题标题】：knockout reset viewmodel to original data淘汰赛将视图模型重置为原始数据
【发布时间】：2016-10-13 05:27:10
【问题描述】：

将淘汰视图模型重置回原始数据的最佳方法是什么？

如果原始数据json没有改变，在我对observable做了一些改变之后，我该如何设置它呢？就像刷新页面一样。

【问题讨论】：

【解决方案1】：

我认为“刷新”您的 viewModel 是不好的做法。你可以这样刷新它：

ko.cleanNode(document.getElementById("element-id"));
ko.applyBindings(yourViewModel, document.getElementById("element-id"));

但我认为在你的视图模型上有一个名为“reset”的方法会更干净，它将你的 observables 设置回初始状态。可能是这样的：

function MyViewModel() {
  this.something = ko.observable("default value");
  this.somethingElse = ko.observable(0):

  this.reset = function() {
    this.something("default value");
    this.somethingElse(0);
  }
}

【讨论】：

【解决方案2】：

ViewModel 通常由某些 dto 提供的一些数据构成。可以通过

将视图模型重置为其原始状态

在私有变量中跟踪原始状态。
添加了可在构建时以及需要重置时调用的重置函数。

function Car(dto) {
  var originalState = dto;

  this.brand = ko.observable();
  this.color = ko.observable();

  this.reset = function() {
    this.brand(originalState.brand);
    this.color(originalState.color);
  }

  this.reset();
}

ko.applyBindings(new Car({
  brand: 'mercedes',
  color: 'red'
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<p>
  <em>Current viewmodel values:</em>
  <br/>Brand: <strong data-bind="text:brand"></strong>
  <br/>Color: <strong data-bind="text:color"></strong>
</p>
<p>
  <em>Change viewmodel values:</em>
  <br/>Brand:
  <input data-bind="textInput:brand">
  <br/>Color:
  <input data-bind="textInput:color">
</p>
<p>
  <button data-bind="click: reset">Reset viewmodel values</button>
</p>

【讨论】：