从淘汰赛观察到

Question

我有下面的模型

self.newItem = ko.observable({ 
    manufacturer: ko.observable(), 
    itemnumber: ko.observable(), 
    itemDescription: ko.observable(), 
    priceclass: ko.observable(), 
    currentPrice: ko.computed(function() { 
     return "1.22"; 
    }, this), 
    aeAuthority: ko.computed(function() { 
     return "1.02PC"; 
    }, this), 
    requestedMinimumQuantity: ko.computed(function() { 
     return "!.22 PC"; 
    }, this), 
    RequestedPrice: ko.observable(), 
    ExpirationDate: ko.observable(),  
    ItemDetails: ko.observable(), 
    Margin: ko.observable(), 
    Status: ko.observable() 

}); 

我想清楚了这里面可观察到的数据，但是当我这样做self.newItem = ""; or self.newItem('');但去除的newitem里面所有的观测所以没有财产清算出的数据留在newItem中。我可以单独进入并清除newItem中的每个可观察对象，但有没有更好的方法来完成它。

感谢

Answer 1

没有迭代方法在淘汰赛中，你必须自己写一个。通常我会推荐使用构造函数，其中有很多选项可用于您想要的（具体实现取决于需求）。

然而，要回答你的问题“直线上升”，这里是为“清理”可观察性的所有数据中最简单的方法另一可观察到的：

function clean() { 
    var item = self.newItem(); 
    for (var key in item) { 
    if (item.hasOwnProperty(key) && ko.isWriteableObservable(item[key])) { 
     item[key](null); 
    } 
    } 
}; 

这里有一个可运行的例子：

function ViewModel() { 
 
    var self = this; 
 
    
 
    self.newItem = ko.observable({ 
 
    manufacturer: ko.observable("Some manufacturer"), 
 
    itemnumber: ko.observable("12345"), 
 
    itemDescription: ko.observable("A nice item"), 
 
    priceclass: ko.observable("High"), 
 
    currentPrice: ko.computed(function() { 
 
     return "1.22"; 
 
    }, this), 
 
    aeAuthority: ko.computed(function() { 
 
     return "1.02PC"; 
 
    }, this), 
 
    requestedMinimumQuantity: ko.computed(function() { 
 
     return "!.22 PC"; 
 
    }, this), 
 
    RequestedPrice: ko.observable(1.25), 
 
    ExpirationDate: ko.observable(new Date()),  
 
    ItemDetails: ko.observable("Comes with a thingie"), 
 
    Margin: ko.observable(0.25), 
 
    Status: ko.observable("Available") 
 
    }); 
 
    
 
    self.clean = function() { 
 
    var item = self.newItem(); 
 
    for (var key in item) { 
 
     if (item.hasOwnProperty(key) && ko.isWriteableObservable(item[key])) { 
 
     item[key](null); 
 
     } 
 
    } 
 
    }; 
 
} 
 

 
ko.applyBindings(new ViewModel());

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> 
 
<button data-bind="click: clean">clean out everything</button> 
 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Answer 2

这是实现清除模型的另一个好方法。在ko.simpleMap的帮助下，您可以使用默认值为viewModel中的现有模型分配新值。它使用Array functionsome。您也可以在从服务器获取数据，然后将值应用于现有viewModel的场景中使用此功能。您还可以使用ko.simpleMap来JS对象作为source。

(function(){ 
 
    ko.simpleMap = function(source, target, excludedFields){ 
 
     excludedFields = excludedFields || []; 
 

 
     for(var key in source){ 
 
      if(!source.hasOwnProperty(key) || key[0] === "_" || excludedFields.some(function(excludedField) { 
 
       return excludedField.toLowerCase() === key.toLowerCase(); 
 
      })) 
 
       continue; 
 
      var targetKey; 
 
      if(!Object.getOwnPropertyNames(target).some(function(tempKey) { 
 
       if(tempKey.toLowerCase() === key.toLowerCase()){ 
 
        targetKey = tempKey; 
 
        return true; 
 
       } 
 

 
       return false; 
 
      })) 
 
       continue; 
 

 
      var sourceValue; 
 

 
      if(typeof source[key] === "function") 
 
       sourceValue = source[key](); 
 
      else 
 
       sourceValue = source[key]; 
 

 
      if(typeof target[targetKey] === "function"){ 
 
       if(ko.isWriteableObservable(target[targetKey])) 
 
        target[targetKey](sourceValue); 
 
      } else 
 
       target[targetKey] = sourceValue; 
 
     } 
 

 
     return target; 
 
    }; 
 

 
})(); 
 

 
function MyModel(){ 
 
    this.manufacturer= ko.observable(); 
 
    this.itemnumber= ko.observable(); 
 
    this.itemDescription= ko.observable(); 
 
    this.priceclass= ko.observable(); 
 
    this.currentPrice= ko.computed(function() { 
 
     return "1.22"; 
 
    }, this); 
 
    this.aeAuthority= ko.computed(function() { 
 
     return "1.02PC"; 
 
    }, this); 
 
    this.requestedMinimumQuantity= ko.computed(function() { 
 
     return "!.22 PC"; 
 
    }, this); 
 
    this.RequestedPrice= ko.observable(); 
 
    this.ExpirationDate= ko.observable();  
 
    this.ItemDetails= ko.observable(); 
 
    this.Margin= ko.observable(); 
 
    this.Status= ko.observable("Approved"); 
 

 
} 
 

 
var viewModel = { 
 
    item: new MyModel(), 
 
    clear: function(){ 
 
    ko.simpleMap(new MyModel(), this.item); 
 
    } 
 
}; 
 

 
ko.applyBindings(viewModel);

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

 
<input data-bind="value: item.manufacturer" type="text" /><span data-bind="text: item.manufacturer"></span><br/> 
 
<input data-bind="value: item.itemnumber" type="text" /><span data-bind="text: item.itemnumber"></span><br/> 
 
<input data-bind="value: item.itemDescription" type="text" /><span data-bind="text: item.itemDescription"></span><br/> 
 
<input data-bind="value: item.priceclass" type="text" /><span data-bind="text: item.priceclass"></span><br/> 
 
<span data-bind="text: item.currentPrice"></span><br/> 
 
<span data-bind="text: item.aeAuthority"></span><br/> 
 
<span data-bind="text: item.requestedMinimumQuantity"></span><br/> 
 
<input data-bind="value: item.RequestedPrice" type="text" /><span data-bind="text: item.RequestedPrice"></span><br/> 
 
<input data-bind="value: item.ExpirationDate" type="text" /><span data-bind="text: item.ExpirationDate"></span><br/> 
 
<input data-bind="value: item.ItemDetails" type="text" /><span data-bind="text: item.ItemDetails"></span><br/> 
 
<input data-bind="value: item.Margin" type="text" /><span data-bind="text: item.Margin"></span><br/> 
 
<input data-bind="value: item.Status" type="text" /><span data-bind="text: item.Status"></span><br/> 
 
<button data-bind="click:clear">Clear</button><br/>