JavaScriptのメメント

Question

私はCRUDフォームで使用されるmementoパターン（GoF）のJavaScript実装を探しています。基本レベルでは、入力の変更を元に戻すだけで十分ですが、YUIやExtなどの標準JSフレームワークでそれを使用して、&のREDOグリッドアクション（新しい行、削除行など）を元に戻すとよいでしょう。

おかげ

Answer 1

私はここで、任意のコードの例を見ていないよのではEXTフォームのアンドゥの迅速な「Nダーティー実装です：編集可能なグリッドのためにこれを実装する

var FormChangeHistory = function(){ 
    this.commands = []; 
    this.index=-1; 
} 

FormChangeHistory.prototype.add = function(field, newValue, oldValue){ 
    //remove after current 
    if (this.index > -1) { 
     this.commands = this.commands.slice(0,this.index+1) 
    } else { 
     this.commands = [] 
    } 
    //add the new command 
    this.commands.push({ 
     field:field, 
     before:oldValue, 
     after:newValue 
    }) 
    ++this.index 
} 

FormChangeHistory.prototype.undo = function(){ 
    if (this.index == -1) return; 
    var c = this.commands[this.index]; 
    c.field.setValue(c.before); 
    --this.index 
} 

FormChangeHistory.prototype.redo = function(){ 
    if (this.index +1 == this.commands.length) return; 
    ++this.index 
    var c = this.commands[this.index]; 
    c.field.setValue(c.after); 
} 

Ext.onReady(function(){ 
    new Ext.Viewport({ 
     layout:"fit", 
     items:[{  
      xtype:"form", 
      id:"test_form", 
      frame:true, 
      changeHistory:new FormChangeHistory("test_form"), 
      defaults:{ 
       listeners:{ 
        change:function(field, newValue, oldValue){ 
         var form = Ext.getCmp("test_form") 
         form.changeHistory.add(field, newValue, oldValue) 
        } 
       } 
      }, 
      items:[{ 
       fieldLabel:"type some stuff", 
       xtype:"textfield" 
      },{ 
       fieldLabel:"then click in here", 
       xtype:"textfield" 
      }], 
      buttons:[{ 
       text:"Undo", 
       handler:function(){ 
        var form = Ext.getCmp("test_form") 
        form.changeHistory.undo(); 
       } 
      },{ 
       text:"Redo", 
       handler:function(){ 
        var form = Ext.getCmp("test_form") 
        form.changeHistory.redo(); 
       } 
      }] 
     }] 
    }) 
}); 

は少しトリッキーですが、あなたはすべき同じことを行うGridChangeHistoryを作成してから、EditorGridのAfterEditリスナーからadd（）関数を呼び出すことができます。

"before"と "after"プロパティは、任意の種類のコマンドを元に戻す/やり直すことを可能にするコールバック関数ですが、add（）を呼び出すときにはもっと多くの作業が必要です。

Answer 2

あなたがコマンドをアンドゥ/リドゥしようとしているので、私が代わりにCommand patternを使用することをお勧め。 Here is a link to a tutorial;それはC＃にありますが、OOプログラマのためにはそれほど簡単ではありません。