How to Pass DOM element to Aurelia function?

Question

I'm trying to pass the DOM element to Aurelia function, but it ain't work. Just to notice that this element is not in the 'repeat.for' statement.

I have something like this, which obviously is not correct :

<span click.trigger="passDom(d)">Pass Dom Element</span>


export class Test {

  passDom(d) {
    console.log(d);
  }
}

I try using $self, but not working as well.

Clywd

Answer 1

Use $event.target like this:

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

You can read more about DOM events in Aurelia Hub - DOM Events.

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

Alternatively, you can create reference to DOM event and use it from 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 in Aurelia Hub - Referencing Elements.

Use the ref binding command to create a reference to a DOM element. The ref command's most basic syntax is ref="expression". When the view is data-bound the specified expression will be assigned the DOM element.

Lamarre

Answer 2

Another thing you could do if this.myElement is too much magic within the VM, is to pass the reference 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);
  }
}

Pinkster