KoLiteパッケージのdirtyFlagを使用して、オブジェクトのJsプロパティの変更を追跡する

ViewModelオブジェクトの変更を追跡するには、 KoLiteライブラリの一部であるdirtyFlagが役立ちます。これは、新しい機能を追加することでノックアウトの機能を拡張します。

• dirtyFlag-個々のViewModelプロパティと集計ViewModelプロパティの両方の変更を追跡するように設計されています
• asyncCommand-非同期コマンドを実行するように設計されています
• アクティビティ - アクティビティを示すように設計されています。 asyncCommandと組み合わせて使用

説明

ノックアウト拡張ライブラリパッケージは、 HansFjällemarkとJohn Papaの 2人によって作成されました。

ここでソースコードと例を表示します 。

dirtyFlagを使用してViewModelの変更を検出する例

たとえば、次のViewModelオブジェクトを見てみましょう。

function Vm(){ var user = { name : ko.observable('Alexey'), email : ko.observable('alexey@mail.me'), address : ko.observable('Moskow st. Petrov 12'), awards : ko.observableArray([new Award('silver','The best speaker'), new Award('gold','Brain Storm #2')]) }, dirtyFlag = ko.DirtyFlag(user); return { user : user, dirtyFlag : dirtyFlag, modelStatus : ko.computed(function(){ return dirtyFlag().isDirty() ? "Changes detected" : "No changes"; }), clearDirty : function(){ dirtyFlag().reset(); } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このViewModelはdirtyFlag



プロパティを使用します。このプロパティは、 user



複合プロパティ内の値の変更を追跡します。 ユーザープロパティでどのような追跡が行われるかを示すために、フォームの構築が使用されますko.DirtyFlag(user);



。 モデルをバインドした後、 dirtyFlag



はuser



プロパティの変更を追跡します。 データの「汚染」のステータスを取得するには、 dirtyFlag().isDirty()



を呼び出す必要があります。 isDirty（）は、変更が検出された場合はtrue



返し、 true



ない場合はfalse



返しtrue



。 ユーザーが変更を行ってからデータを元の状態に戻した場合、 isDirtyはfalseを返します。これは、分析されたプロパティの初期状態（つまり、オブジェクトのデータのコピー）を保存するためです。 これは、dirtyFlagコードを見るとはっきりとわかります。



以下に、dirtyFlagの機能を確認できる完全なサンプルコードを示します。















この例では、指示として、「変更なし」-変更が検出されない場合、および「変更が検出された」-変更が見つかった場合、碑文が表示されます。 また、背景の変更が行われ、表示のために碑文が表示されます。



「ダーティステータスのリセット」ボタンは、 dirtyFlag ViewModelプロパティのreset



メソッドを示すサンプルフォームにあります。 現在の変更を基本として受け入れるには、 dirtyFlag().reset();



を呼び出す必要がありdirtyFlag().reset();



。

おわりに

このライブラリは、ViewModelの必要なプロパティの変更を簡単に追跡するのに役立つと思います。

• JsFiddleの実例
• GitHubのKoLite

ご清聴ありがとうございました！



PS私は投稿のために自分で絵を描きました:)