観測可能

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

ノックアウトで方法を反復なしはありません、あなたは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

これは、モデルをクリアするもう1つの方法です。 ko.simpleMapの助けを借りて、デフォルト値でviewModelの既存のモデルに新しい値を割り当てることができます。それはArray functionsomeを使用します。また、サーバーからデータを取得し、既存のviewModelに値を適用するシナリオでもこれを使用できます。 JSオブジェクトにko.simpleMapを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/>