在 Aurelia 中，我可以绑定包含视图模型中的函数以供自定义元素调用吗？

我有一个自定义元素，它将接受用户输入，并且在单击[保存]按钮时，我想将信息传递给父视图模型，以便我可以将其发送到服务器并移至下一部分。例如，我将简化这一点：

my-element.js:

import { customElement, bindable } from 'aurelia-framework';

@customElement('my-element')
@bindable('save')
export class MyElement { }

my-element.html:

<template>
    <button click.delegate="save()">Click this</button>
</template>

parent-view-model.js:

export class ParentViewModel {
  parentProperty = 7;
  parentMethod() {
    console.log(`parent property: ${this.parentProperty}`);
  }
}

parent-view-model.html:

<template>
    <require from="./my-element"></require>
    <div class="content-panel">
        <my-element save.bind="parentMethod"></my-element>
    </div>
</template>

有关演示，请参阅（app.js 和 app.html 分别代表parent-view-model.js 和parent-view-model.html）：

https://gist.run/?id=96b203e9ca03b62dfb202626c2202989 https://gist.run/?id=96b203e9ca03b62dfb202626c2202989

有用！有点儿。很遗憾，this似乎必然my-element代替parent-view-model，所以在这个例子中，打印到控制台的内容是：parent property: undefined。这是行不通的。

我知道我可以利用 EventAggregator 来促进自定义元素和视图模型之间的一些通信，但如果我可以帮助它，我希望避免增加复杂性。

为此，您有两种选择。您可以使用自定义事件来处理此问题，也可以使用callAnj 在他的回答中提到的绑定。您使用哪一种取决于您的实际用例。

如果您希望自定义元素能够调用父虚拟机上的方法并传递数据out的自定义元素，那么您应该使用自定义事件，如下要点所示：https://gist.run/?id=ec8b3b11f4aa4232455605e2ce62872c https://gist.run/?id=ec8b3b11f4aa4232455605e2ce62872c:

应用程序.html：

<template>
    <require from="./my-element"></require>
    <div class="content-panel">
        <my-element save.delegate="parentMethod($event)"></my-element>
    </div>

    parentProperty = '${parentProperty}'
</template>

app.js:

export class App {
  parentProperty = 7;
  parentMethod($event) {
    this.parentProperty = $event.detail;
  }
}

我的元素.html：

<template>
    <input type="text" value.bind="eventDetailValue" />
    <button click.delegate="save()">Click this</button>
</template>

我的元素.js：

import { inject, customElement, bindable } from 'aurelia-framework';

@customElement('my-element')
@inject(Element)
export class MyElement {
  eventDetailValue = 'Hello';

  constructor(element) {
    this.element = element;
  }

  save() {
    var event = new CustomEvent('save', { 
      detail: this.eventDetailValue,
      bubbles: true
    });

    this.element.dispatchEvent(event);
  }
} 

您基本上会附加需要传递的任何数据detail自定义事件的属性。在事件绑定声明中，您将添加$event作为函数的参数，然后检查detail事件处理程序中 $event 的属性（您也可以只传递$event.detail如果你愿意的话）。

如果您希望自定义元素能够调用父虚拟机上的方法并从父虚拟机（或从另一个自定义元素或其他元素）传入数据，那么您应该使用call捆绑。您可以通过在绑定声明中指定参数来指定将传递给方法的参数（foo.call="myMethod(myProperty)"。这些参数来自声明绑定的 VM 上下文，而不是来自自定义元素的 VM。