जावास्क्रिप्ट में Memento

Question

मैं CRUD रूपों में उपयोग किए जाने वाले स्मृति चिन्ह (गोफ) के जावास्क्रिप्ट कार्यान्वयन की तलाश में हूं। अपने मूल स्तर में इनपुट पर परिवर्तन पूर्ववत करने के लिए पर्याप्त होगा, लेकिन & रेडो ग्रिड क्रियाओं (नई पंक्ति, पंक्ति हटाएं आदि) को पूर्ववत करने के लिए, वाईयूआई या एक्सटी जैसे मानक जेएस ढांचे के साथ इसका उपयोग करना बहुत अच्छा होगा।

धन्यवाद

Answer 1

जब से मैं किसी भी कोड उदाहरण नहीं दिखाई दे रही है, यहाँ एक त्वरित 'एन गंदा पूर्ववत के EXT फार्म के लिए दिया गया है:

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(); 
       } 
      }] 
     }] 
    }) 
}); 

एक संपादन योग्य ग्रिड के लिए इस को लागू करने के लिए थोड़ा जटिल काम है, लेकिन आप चाहिए एक ग्रिडChangeHistory बनाने में सक्षम हो जो एक ही काम करता है और उसके बाद EditorGrid के AfterEdit श्रोता से add() फ़ंक्शन को कॉल करें।

"पहले" और "बाद" गुण कॉलबैक फ़ंक्शंस हो सकते हैं जो आपको किसी भी प्रकार की कमांड को पूर्ववत/दोबारा करने की अनुमति देता है, लेकिन जोड़ने के लिए अधिक काम की आवश्यकता होगी()

Answer 2

जब से तुम पूर्ववत करने के लिए/फिर आदेशों कोशिश कर रहे हैं, मैं बजाय Command pattern उपयोग करने का सुझाव। Here is a link to a tutorial; यह सी # में है, लेकिन यह एक ओओ प्रोग्रामर के लिए पालन करने के लिए काफी सरल होना चाहिए।