CODEWITHSUNDEEP
ember.js
MojoJojo
MojoJojo

Reputation: 4232

Ember.js Overriding an add-on's component

I am fairly new to Ember.js and trying to use the datepicker component from ember-cli-jquery module (https://www.npmjs.com/package/ember-cli-jquery-ui) in my project.

The issue I'm facing is that I need to run some custom jquery initialization code after the datepicker component loads.

After research for several hours, came across this article http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/ and this stackoverflow post: Using Ember.js, how do I run some JS after a view is rendered?

The post describes using 'didInsertElement' hook to run any initialization code - however, as I'm using the ember-cli-jquery-ui plugin, I'm not sure how to do this without changing/modifying the code in node_modules/ember-cli-jquery-ui/addon/mixins/jqui-widget.js

I looked at the source code for ember-cli-jquery-ui and it turns out the above mentioned method is already being overridden. Reading through the API documentation on emberjs, it seems like any method can be extended and classses can be re-opened, I'm just not sure how to do it. Is there a way I can further extend/override that method in my app.js or index.js for instance?

Any help would be greatly appreciated.

Upvotes: 3

Views: 1967

Answers (1)

Billybonks
Billybonks

Reputation: 1568

You can just extend the component and call the super method. and use this as the new component in you app

//app/components/my-date-picker.js {{my-date-picker}}
import DatePicker from "path/to/picker"

export default DatePicker.extend({
   didInsertElement:function(){
    //do things before super
    this._super(); //this._super() instead of this.super()
    //do things after super
   }
})

Upvotes: 3

Related Questions