undo redo - Memento in Javascript - Stack Overflow

admin管理员组

文章数量:1336124

I'm looking for a JavaScript implementation of the memento pattern (GoF) to be used in CRUD forms. In its basic level it will be enough to undo changes on inputs, but it would be great to use it with standard JS frameworks like YUI or Ext, to undo & redo grid actions ( new row, delete row etc.).

Thanks

I'm looking for a JavaScript implementation of the memento pattern (GoF) to be used in CRUD forms. In its basic level it will be enough to undo changes on inputs, but it would be great to use it with standard JS frameworks like YUI or Ext, to undo & redo grid actions ( new row, delete row etc.).

Thanks

• javascript
• undo-redo
• memento

Share Follow asked May 19, 2009 at 14:13 Lluis MartinezLluis Martinez 1,97388 gold badges2828 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Since I'm not seeing any code examples, here is a quick 'n Dirty implementation of undo for an EXT form:

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

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

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

FormChangeHistory.prototype.redo = function(){
    if (this.index +1 == this.mands.length) return;
    ++this.index
    var c = this.mands[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 little trickier, but you should be able to make a GridChangeHistory that does the same thing and then call the add() function from EditorGrid's AfterEdit listener.

The "before" and "after" properties could be callback functions which allow you undo/redo any kind of mand, but that would require more work when calling add()

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

本文标签： undo redoMemento in JavascriptStack Overflow