從淘汰賽觀察到

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