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

Help Requests
1

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.

1 Like
2

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:

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

3

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;
            };
        });
4

It needs to be applied on the syntax interpreter instead of binding language:

- const originalTriggerSyntax = bindingLanguage.trigger;
+ const originalTriggerSyntax = bindingLanguage.syntaxInterpreter.trigger;
...
-      bindingLanguage.trigger = function() {
+      bindingLanguage.syntaxInterpreter.trigger = function() {