How to fully empty observable object with observable properties?

Question

I have 2 objects like this

self.objCurrentResource = ko.observable({
    UID: ko.observable(),
    Capacity: ko.observable(),
    Duration: ko.observable(),
    Name: ko.observable(),
    Description: ko.observable(),
    QTY: ko.observable(), //added from wizard
    SelectedDate: ko.observable(), //added from wizard
    Exeptions: ko.observableArray([]),
    Schedules: ko.observableArray([]),
    ResourceReady: ko.observable(false),
    SelectedSlots: ko.observableArray([])
});

how can i fully empty everything on button click? I have the button and everything but i seem to not be able to empty all the values. How can i achieve that?

Answer 1

I'll assume your definition of emptying an observable means writing null or undefined to it, and writing an empty array to ko.observableArrays

One way to do it:

Your objCurrentResource observable returns a javascript object. You'll have to iterate over its properties and perform some sort of clear method on each value. So:

1. Retrieve the object
2. Iterate over its values
3. Clear each value

var clearIfObservable = function(value) {
  if (!ko.isObservable(value)) return;

  // Quick way of detecting observableArray: 
  // //https://github.com/knockout/knockout/pull/706#issuecomment-33545542
  if ('push' in value) { 
    value([]);
  } else {
    // Regular obs. case:
    value(undefined);
  }
};

var clearAllObservableProperties = function(obj) {
  Object.keys(obj).forEach(function(k) {
    clearIfObservable(obj[k])
  });

  return obj;
};

var clearIfObservable = function(value) {
  if (!ko.isObservable(value)) return;
  
  // Quick way of detecting observableArray: 
  // //https://github.com/knockout/knockout/pull/706#issuecomment-33545542
  if ('push' in value) { 
    value([]);
  } else {
    // Regular obs. case:
    value(undefined);
  }
};

var clearAllObservableProperties = function(obj) {
  Object.keys(obj).forEach(function(k) {
    clearIfObservable(obj[k])
  });
  
  return obj;
};


var objCurrentResource = ko.observable({
    UID: ko.observable(),
    Capacity: ko.observable(),
    Duration: ko.observable(),
    Name: ko.observable(),
    Description: ko.observable(),
    QTY: ko.observable(), 
    SelectedDate: ko.observable(),
    Exeptions: ko.observableArray([]),
    Schedules: ko.observableArray([]),
    ResourceReady: ko.observable(false),
    SelectedSlots: ko.observableArray([])
});

console.log("before ResourceReady value:", objCurrentResource().ResourceReady());
console.log("before Schedules value:", objCurrentResource().Schedules());

clearAllObservableProperties(objCurrentResource());

console.log("after ResourceReady value:", objCurrentResource().ResourceReady());
console.log("after Schedules value:", objCurrentResource().Schedules());

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

A better way:

Looping and clearing like the example below can only get you so far... I'd recommend stepping away from plain objects and using viewmodel constructors instead. I.e.:

var CurrentResource = function() {
  this.UID = ko.observable();
  this.Capacity = ko.observable();
  this.Duration = ko.observable();
  this.Name = ko.observable();
  this.Description = ko.observable();
  this.QTY = ko.observable(), //added from wizar;
  this.SelectedDate = ko.observable(), //added from wizar;
  this.Exeptions = ko.observableArray([]);
  this.Schedules = ko.observableArray([]);
  this.ResourceReady = ko.observable(false);
  this.SelectedSlots = ko.observableArray([]);
};


// Instantiate
var objCurrentResource = ko.observable(new CurrentResource());

// Set some values:
objCurrentResource().ResourceReady(true);

// To clear, replace by a new one:
objCurrentResource(new CurrentResource());

Answer 2

Try this:

foreach (key in self.objCurrentResource()) self.objCurrentResource()[key](null);