如何将所有可观察量重置为默认值

Question

我有几个可观察的属性。我不想重置单个可观察属性。这是我的一些示例代码。

function viewData() {
     var self = this;
     self.Id = ko.observable("");
     self.Name = ko.observable("");
     self.Display = ko.observable("");
     self.Date = ko.observable("");
     self.Reset = function {
          //Reset all observable variables here
     }
}

这是真实事物的简短列表。我有大约 30 个可观察的属性。

Answer 1

如果只想"清除"可观察量，请使用ko.isWriteableObservable(...)实用程序方法：

function viewData() {
  var self = this;
  self.Id = ko.observable("A");
  self.Name = ko.observable("B");
  self.Display = ko.observable("C");
  self.Date = ko.observable("D");
  self.Reset = function() {
    for (var key in self) {
      if (self.hasOwnProperty(key) && ko.isWriteableObservable(self[key])) {
        self[key](null);
      }
    }
  };
}
ko.applyBindings(new viewData());

pre { font: 11px consolas; padding: 5px; background: #fafafa; border: 1px solid #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<input data-bind="textInput: Id"><br>
<input data-bind="textInput: Name"><br>
<input data-bind="textInput: Display"><br>
<input data-bind="textInput: Date"><br>
<button data-bind="click: Reset">Reset</button>
<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

如果确实要设置默认值，则必须手动实现该模式。对于您的答案给出的用例，@Nora的答案将正常工作。对于更复杂的方案，您需要以某种方式"定义"默认值：

function viewData() {
  var self = this;
  
  var defaults = {
    Id: 0,
    Name: "",
    Display: "stub value",
    Date: new Date()
  };
  
  self.Id = ko.observable();
  self.Name = ko.observable();
  self.Display = ko.observable();
  self.Date = ko.observable();
  self.Reset = function() {
    for (var key in self) {
      if (self.hasOwnProperty(key) && ko.isWriteableObservable(self[key])) {
        self[key](defaults[key]);
      }
    }
  };
  
  self.Reset();
}
ko.applyBindings(new viewData());

pre { font: 11px consolas; padding: 5px; background: #fafafa; border: 1px solid #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<input data-bind="textInput: Id"><br>
<input data-bind="textInput: Name"><br>
<input data-bind="textInput: Display"><br>
<input data-bind="textInput: Date"><br>
<button data-bind="click: Reset">Reset</button>
<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Answer 2

不确定这是否是您需要的，但是您可以将设置默认值提取到函数中，并在需要重置所有值时使用它

function viewData() {
    setDefaultValues()
    self.Reset = function {
        setDefaultValues()
    }
}
var setDefaultValues = function () {
    var self = this;
    self.Id = ko.observable("");
    self.Name = ko.observable("");
    self.Display = ko.observable("");
    self.Date = ko.observable("");
}