CODEWITHSUNDEEP
javascriptknockout.jsknockout-3.0
Luke101
Luke101

Reputation: 65268

How to reset all observables to default value

I have several observable properties. I don't want to reset individual observable properties. Here is some example code I have.

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

This is an short list of the real thing. I have about 30 observable properties.

Upvotes: 1

Views: 3560

Answers (2)

Jeroen
Jeroen

Reputation: 63729

If you want to just "clear" observables, use the ko.isWriteableObservable(...) utility method:

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>

If you truly want to set default values, you'll have to manually implement that pattern. For the use case your answer gives, the answer by @Nora will work just fine. For more complex scenarios you'd need to "define" your defaults somehow:

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>

Upvotes: 2

Nora
Nora

Reputation: 3261

Not sure if this is what you need, but you can extract the setting default values into a function and use it whenever you need to reset all values

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("");
}

Upvotes: 1

Related Questions