Can't override converse.js core functions

Question

I have problem when trying to override converse.js core functions. Following this example: https://conversejs.org/docs/html/development.html#writing-a-converse-js-plugin and https://conversejs.org/docs/html/quickstart.html. My code look like this:

require(['converse'], function (converse) {
    "use strict";

    converse.plugins.add('pluginName', {
        overrides: {
            onConnected: function () {
                this._super.onConnected();
            },
            ChatBoxView: {                
                showMessage: function (attrs) {                    
                    this._super.showMessage(attrs);
                }
            }
        }
    });

    converse.initialize({
        bosh_service_url: 'http://myurl.com/http-bind/',
        i18n: locales.en,
        show_controlbox_by_default: true,
        roster_groups: true,
        keepalive: true,
        jid: '[email protected]',
        message_carbons: true,
        play_sounds: true,
        anonymous: false,
        allow_logout: false,
        authentication: 'prebind',
        prebind_url: '/prebind',
        auto_list_rooms: true
    });
});

This code partially works. Chat is displayed, it is connected (this._super.onConnected(); works fine), but I get error when I want to display message (ChatBoxView.showMessage function). Error message is: TypeError: this.$content is undefined.

How to "define" ChatBoxView this method?

Answer 1

The problem is most likely that the the variable in the super function is bound to the wrong context.

You can solve that by changing this._super.showMessage(attrs); to this._super.showMessage.apply(this, arguments);.

That will call the function with the correct this parameter and all the arguments that was passed to the overriding function.

On a sidenote, I'll update the documentation to reflect this.