Should binding to (custom) DOM event, with hyphen in the name work?

[dtaalbers]

Hi there.

I’ve build a custom StencilJS component that fires a custom DOM event (see below). FYI: The ‘on’ part is added bij StencilJS itself.

@Event() searchEvent: EventEmitter<string>;

But when I want to bind to that event it doesn’t work. See my HTML and viewmodel.

// Html
<my-component ref="myComponent" search-event.trigger="handleSearch($event)">

// View model
export class App {

	private myComponent: StencilJS.MyComponent;

	private attached(): void {
		// This works. So I know that the event is triggered properly.
		this.myComponent.addEventListener('searchEvent', (ev: CustomEvent<string>) => this.handleSearch(ev));
	}

	private handleSearch(event: CustomEvent<string>): void {
	 	// The event handler. This is not triggered via the 'search-event.trigger' binding.
	}	
}

But when I change the event name on my StencilJS component to the following

@Event() searchevent: EventEmitter<string>;

and my html to

<my-component ref="myComponent" searchevent.trigger="handleSearch($event)">

the binding works fine! Is there something I am missing? Can’t aurelia handle the hyphen in the DOM event name when binding?

Any help is appreciated.

[bigopon]

Aurelia takes event names in the template as is, though there’ a way or two to tell a binding to use camel cased version of the event name:

• use a binding behavior to alter the event name in binding https://gist.dumber.app/?gist=1a5d8950c0257cd37ffc213fd099f904 The pro of this approach is you control it per binding
• to always turn event name into camel case, we can override syntax interpreter .trigger syntax like this example https://gist.dumber.app/?gist=87f64cd54f4404a8e62f00982dc738d4

We will have proper doc around this in v2, as it seems to be a common requirements. Thanks for asking about this.

[genadis]

@bigopon

to always turn event name into camel case, we can override syntax interpreter .trigger syntax like this example Dumber Gist

Thank you for the suggestion, it seems the gist is out of date, I tried the approach but without success.
There is error in the gist.
In addition tried it runs in my app but the trigger function is never called:

aurelia.use.postTask(() => {
            const bindingLanguage = aurelia.container.get(BindingLanguage) as any;
            const originalTriggerSyntax = bindingLanguage.trigger;
            bindingLanguage.trigger = function () {
                const expression = originalTriggerSyntax.apply(this, arguments);
                expression.originalTargetEvent = expression.targetEvent;
                expression.targetEvent = camelCase(expression.targetEvent);
                return expression;
            };
        });