mootools Class overload

Question

I cannot overload class function

var Input_text = new Class({ 
initialize: function(obj, defo){
    that = this;
    if (obj) {
        this.elem = obj;
        this.elem.addEvent('keyup', function(event) {that.keyup_func(event)} );
    }
    else {            
        this.elem = new Element('input', {
            'type': 'text',
            events: {'keyup': function(event) {that.keyup_func(event)}}
        });
    }
    this.elem.set('value', defo);
    return this.elem;
},
keyup_func: function(evt) {
    alert(evt.key+' '+evt.code+' '+this.elem.get('tag'));
}

});

var Input_date = new Class({
Extends: Input_text,
initialize: function (obj, defo) {
    this.parent(obj, defo);
    this.elem.set('size',10);
    return this.elem;
},
keyup_func: function(evt) {
    console.log(evt.key+' '+evt.code+' '+this.elem.get('tag'))    
}

});

    obj_text = new Input_text(null, 'test').obj.inject($('mydiv'));
    obj_date = new Input_date(null, '2022').obj.inject($('mydiv'));

When I type in each input I have always the second function keyup_func and never the "alert" of the first class.

Where is the error? Thank you for your response.

Answer 1

In your initialize function of your base class, keyup_func still points to the original version. So when you bind keyup_func in your call to addEvent, you're binding the original version.

(this would have been the same with ECMAScript constructors, or with eg C++ classes)

You can work around this by adding a wrapper in your base class to invoke keyup_func. that will invoke the proper version once it runs, ie:

   addEvent(..., function(event) { that.invoke_keyup_func(event); }

   invoke_keyup_func: function(evt) { return this.keyup_func(evt); }