Scott Clark Scott Clark - 2 months ago 17
Javascript Question

Aurelia: How to detect or register callback for when custom element is loaded and ready to interface with

I have a pie chart custom element and I want to be able to configure what event sends the data to be rendered from the view model.

Right now the current solution is as follows (and feels a bit hacky)

html

<pie-chart ref="pc" event.bind="pc.event"></pie-chart>


view model

attached() {
this.pc.event = event_list.MY_EVENT;
}


pie chart custom element

attached() {
var self = this;
setTimeout(function(){
self.subscription = self.eventaggregator.subscribe(self.event, self.setPieData);
},1000);
}


This is just to get me started. But as you can see I'm having to wait until the page is done loading, or one second, to actually set the event subscription up. Otherwise event is null.

I've tried a few approaches such as using the propertyChanged() functionality of the bindable property
event
but that also does not work. All I want to do is know when I am able to interface with the custom element from the view model, then do so. Any tips are appreciated.

Answer

Does the view model's assignment of this.pc.event have to be done in attached()? How about moving it to bind(), created() or the constructor?

view model

bind() {
    this.pc.event = event_list.MY_EVENT;
}
Comments