Memento in Javascript

Question

I am looking for an implementation of a JavaScript template (GoF) for use in CRUD forms. At its basic level, this will be enough to undo changes to the inputs, but it would be great to use it with standard JS frames, such as YUI or Ext, to cancel and repeat the actions of the grid (new line, delete line, etc.) .

thanks

Answer 1

Since I don't see any code examples, here is a brief "n dirty undo implementation for the EXT form:

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

Implementing this for an editable grid is a bit more complicated, but you should be able to make a GridChangeHistory that does the same, and then call the add () function from the EditorGrid AfterEdit listener.

The "before" and "after" properties can be callback functions that allow you to undo / undo any command, but to call add ()

need more work

Answer 2

Since you are trying to undo / redo commands, I suggest using the Command Template instead . Here is a link to the tutorial ; it's in C #, but it should be simple enough to follow the OO programmer.