In JQuery UI, what is the correct syntax to call a super/base function? In my example below should I be calling the base function using this._super(param1)
or this._super('myFunction', param1)
?
$.widget( "namespace.Foo", {
_create: function () {
// ...
this._super( "_create" );
},
myFunction: function(param1) {
// ...
}
});
$.widget( "namespace.Bar", $.namespace.Foo, {
_create: function () {
// ...
this._super( "_create" );
},
myFunction: function(param1) {
// Is this correct?
this._super('myFunction', param1);
// or this?
this._super(param1);
// ...
}
});
This is discussed here: https://api.jqueryui.com/jQuery.widget/#method-_super
Invokes the method of the same name from the parent widget, with any specified arguments. Essentially
.call()
.args Zero to many arguments to pass to the parent widget's method.
_setOption: function( key, value ) {
if ( key === "title" ) {
this.element.find( "h3" ).text( value );
}
this._super( key, value );
}
So it's already invoking _create
in your first example, so you're now sending "_create" as an argument to this._create()
and doesn't really do anything.
Digging deeper, we see: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
_super()
and_superApply()
invoke methods of the same name in the parent widget. Refer to the following example. Like the previous one, this example also overrides theopen()
method to log "open". However, this time_super()
is run to invoke dialog'sopen()
and open the dialog.
$.widget( "custom.superDialog", $.ui.dialog, {
open: function() {
console.log( "open" );
// Invoke the parent widget's open().
return this._super();
}
});
$( "<div>" ).superDialog();
Your first widget is not mutating, so not sure that you need to call _super()
. In your mutation, you do not need to send an argument to _create()
. You can for the the other.
$.widget( "namespace.Bar", $.namespace.Foo, {
_create: function () {
this._super();
},
myFunction: function(param1) {
this._super(param1);
}
});