Question

将knockout viewmodel重置回原始数据的最佳方法是什么？

如果原始数据json未更改，在我对observable进行了一些更改后，如何将其设置回来？就像刷新页面一样。

Answer 1

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

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

但是我觉得在你的视图模型上有一个名为“reset”的方法更清晰，它会将你的observable设置回初始状态。也许是这样的：

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

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

Answer 2

ViewModels通常由一些dto提供的一些数据构建。将视图模型重置为其原始状态可以通过

完成

跟踪私有变量中的原始状态。
添加一个复位功能，可以在施工时调用，也可以在需要复位时调用。

＆＃13;

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'
}));

＆＃13;

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

＆＃13;

knockout将viewmodel重置为原始数据

2 个答案: