如何用可观察的属性完全清空可观察对象？

Question

我有2个像这样的对象

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

如何在点击按钮时完全清空所有内容？我有按钮和一切，但我似乎无法清空所有的值。我怎样才能做到这一点？

Answer 1

我假设您清空一个可观察对象的定义意味着将null或undefined写入其中，并将空数组写入ko.observableArray s

一种方法：

您的objCurrentResource observable会返回一个javascript对象。您将不得不迭代其属性并对每个值执行某种clear方法。所以：

1. 检索对象
2. 迭代其值
3. 清除每个值

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>

更好的方法：

像下面的例子一样循环和清除只能让你到目前为止...我建议逐步远离普通对象并使用viewmodel构造函数。即：

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

试试这个：

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