ノックアウト元のデータにビューモデルをリセットする

Question

ノックアウトビューモデルを元のデータに戻すための最良の方法は何ですか？

元のデータjsonが変更されていない場合は、観測値を変更した後、どのように戻すことができますか？ちょうどページをリフレッシュするように。

Answer 1

あなたのviewModelを「リフレッシュ」するのは悪い習慣だと思います。あなたはこのようにそれを更新することができます：

ko.cleanNode(document.getElementById("element-id")); 
ko.applyBindings(yourViewModel, document.getElementById("element-id")); 

しかし、私は初期状態に戻ってあなたの観測を設定し、「リセット」と呼ばれるあなたのビューモデル、上のメソッドを持っているクリーナーだと思います。おそらく、次のようになります。

function MyViewModel() { 
    this.something = ko.observable("default value"); 
    this.somethingElse = ko.observable(0): 

    this.reset = function() { 
    this.something("default value"); 
    this.somethingElse(0); 
    } 
} 

Answer 2

ViewModelsは、しばしばいくつかのデータによって提供されるデータで構築されます。 ビューモデルを元の状態にリセットするには、プライベート変数に元の状態を記録したままで、

1. で行うことができます。
2. リセット時に呼び出すことのできるリセット機能を追加する。

function Car(dto) { 
 
    var originalState = dto; 
 

 
    this.brand = ko.observable(); 
 
    this.color = ko.observable(); 
 

 
    this.reset = function() { 
 
    this.brand(originalState.brand); 
 
    this.color(originalState.color); 
 
    } 
 

 
    this.reset(); 
 
} 
 

 
ko.applyBindings(new Car({ 
 
    brand: 'mercedes', 
 
    color: 'red' 
 
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<p> 
 
    <em>Current viewmodel values:</em> 
 
    <br/>Brand: <strong data-bind="text:brand"></strong> 
 
    <br/>Color: <strong data-bind="text:color"></strong> 
 
</p> 
 
<p> 
 
    <em>Change viewmodel values:</em> 
 
    <br/>Brand: 
 
    <input data-bind="textInput:brand"> 
 
    <br/>Color: 
 
    <input data-bind="textInput:color"> 
 
</p> 
 
<p> 
 
    <button data-bind="click: reset">Reset viewmodel values</button> 
 
</p>