Initialization events? (metal-jsx)

[bryceosterhaus]

Is it even possible to listen for initialization events? Currently the only way to listen for these events would be to access the ref of the component, but by the time we have access to the ref I think the component will have already fired this event.

For example:

import Component, {Config} from 'metal-jsx';
import {BarChart, PieChart} from 'metal-charts';

class MyComponent extends Component {
	attched() {
		this.refs.chart.on('chartInit', () => {
			// This will never actually fire
			console.log('fire');
		});
	}
	
	render() {
		return (
			<PieChart ref="chart" />
		);
	}
}

export default MyComponent;

I am trying to add something like https://jsbin.com/boyusuz/3/edit?html,js,output

[robframpton]

Hey @bryceosterhaus

Right now those events are bubbled up to the component level, take a look at https://github.com/metal/metal-clay-components/blob/master/packages/clay-charts/src/ChartBase.js#L110-L145.

import Component, {Config} from 'metal-jsx';
import {BarChart, PieChart} from 'metal-charts';

class MyComponent extends Component {
	render() {
		return (
			<PieChart ref="chart" events={{chartInit: () => console.log('fire')}} />
		);
	}
}

export default MyComponent;

Edit: I misread your description, but I think my code snippet should still work.

[bryceosterhaus]

I haven't seen that before where you pass an "events" prop in. Seems really strange and unintuitive at first glance, but I will give it a try.

[robframpton]

Yeah, it's a pattern that I think we inherited from YUI, but I think it would be more clear if it was named on or something like that.

You can also use it for DOM events, and you can pass selectors to filter https://metaljs.com/docs/guides/inline-events.html#inline_listeners_nested_components.