如何将 DOM 元素传递给 Aurelia 函数？答案

【问题标题】：How to Pass DOM element to Aurelia function?如何将 DOM 元素传递给 Aurelia 函数？
【发布时间】：2018-11-22 22:09:57
【问题描述】：

我正在尝试将 DOM 元素传递给 Aurelia 函数，但它不起作用。只是要注意这个元素不在 'repeat.for' 语句中。

我有这样的东西，这显然是不正确的：

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


export class Test {

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

我尝试使用 $self，但效果不佳。

【问题讨论】：

标签： aurelia

【解决方案1】：

像这样使用$event.target：

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

您可以在Aurelia Hub - DOM Events 中阅读有关 DOM 事件的更多信息。

使用特殊的 $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 - Referencing Elements 获得。

使用ref 绑定命令创建对DOM 元素的引用。 ref 命令最基本的语法是ref="expression"。当视图是数据绑定时，指定的表达式将被分配 DOM 元素。

【讨论】：

【解决方案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);
  }
}

【讨论】：