How to pass a DOM element to an Aurelia function?

Question

I am trying to pass a DOM element to an Aurelia function, but this does not work. Just notice that this element is not in the "repeat.for" statement.

I have something like this, which is obviously wrong:

<span click.trigger="passDom(d)">Pass Dom Element</span> export class Test { passDom(d) { console.log(d); } } 

I am trying to use $ self but not working.

Answer 1

Use $event.target as follows:

 <span click.trigger="passDom($event.target)">Pass Dom Element</span> 

You can learn more about the DOM events at Aurelia Hub .

Use the special $ event property to access the DOM event in your binding expression.

Alternatively, you can create a link to the DOM event and use it from the view model:

 <span click.trigger="passDom()" ref="myElement">Pass Dom Element</span> // in view model export class Test { passDom() { console.log(this.myElement); } } 

Also available at Aurelia Hub .

Use the ref binding command to create a reference to the DOM element. The simplest syntax for the ref command is ref="expression" . When a view is bound to data, the specified expression is assigned a DOM element.

Answer 2

Another thing you could do if this.myElement too much magic in the VM is to pass the link to the function directly:

 <span click.trigger="passDom(myElement)" ref="myElement">Pass Dom Element</span> // in view model export class Test { passDom(passedElement) { console.log(passedElement); } }