Как передать элемент DOM функции Aurelia?

Question

Я пытаюсь передать элемент DOM функции Aurelia, но это не работает. Просто заметим, что этот элемент не находится в инструкции 'repeat.for'.

У меня есть что-то вроде этого, что, очевидно, не является правильным:

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


export class Test { 

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

Я пытаюсь использовать $ себя, но не работает, как хорошо.

Answer 1

Использование $event.target так:

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

Вы можете прочитать больше о событиях DOM в Aurelia Hub.

Используйте специальное свойство $ event для доступа к событию DOM в выражении привязки.

В качестве альтернативы, вы можете создать ссылку на DOM-события и использовать его из вида модели:

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

// in view model 
export class Test { 
    passDom() { 
    console.log(this.myElement); 
    } 
} 

также доступны в Aurelia Hub.

Используйте команду привязки ref, чтобы создать ссылку на элемент DOM. Самый базовый синтаксис команды ref - ref="expression". Когда представление привязано к данным, указанному выражению присваивается элемент DOM.

Answer 2

Другая вещь, которую вы могли бы сделать, если this.myElement слишком много магии в VM, чтобы передать ссылку на эту функцию непосредственно:

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

// in view model 
export class Test { 
    passDom(passedElement) { 
    console.log(passedElement); 
    } 
}