One thing that just got me about [Aurelia’s] @customElement
used in conjunction with @containerless
is that it doesn’t propagate events.
For instance, I had tried to use:
//view-model @containerless @customElement('tag-panel') export class TagPanel { el: HTMLElement; //etc dispatch() : void { let e = createEvent('saved', this.property); this.el.dispatchEvent(e); } }
With view markup (Pug)
template button(ref="el", click.delegate="dispatch()")
But I noticed that the event wasn’t propagating. It turns out that the correct thing to do in this case is to inject the DOM element into your view-model, and then dispatch the event from there:
//view-model @containerless @inject(Element) @customElement('tag-panel') export class TagPanel { constructor(private el: Element) { } dispatch() : void { let e = createEvent('saved', this.property); this.el.dispatchEvent(e); } }
And don’t reference el
from your view:
template button(click.delegate="dispatch()")