我有一个自定义元素，它将接受用户输入，然后单击[保存]按钮，我想将信息传递给父视图模型，以便将其发送到服务器并移至下一部分。例如，我将简化此操作：
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
有用！有点儿。不幸的是，this似乎绑定到my-element而不是parent-view-model，因此在此示例中，打印到控制台的内容是：parent property: undefined。那不管用。
我知道我可以利用EventAggregator来促进自定义元素和视图模型之间的某些通信，但是如果我可以帮助的话，我希望避免增加复杂性。
您有两个选择。您可以使用“自定义事件”来处理此问题，也可以使用callAnj在其答案中提到的绑定来进行处理。您使用哪一个取决于您的实际用例。
如果希望自定义元素能够在父VM上调用方法并将数据从该自定义元素传递出去，则应使用以下要点中所示的自定义事件：https : //gist.run/? id = ec8b3b11f4aa4232455605e2ce62872c：
app.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;
}
}
my-element.html：
<template>
<input type="text" value.bind="eventDetailValue" />
<button click.delegate="save()">Click this</button>
</template>
my-element.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）。
如果希望自定义元素能够在父VM上调用方法并从父VM（或从另一个自定义元素或其他东西）传入数据，则应使用call绑定。您可以通过在绑定声明中指定参数来指定要传递给方法的foo.call="myMethod(myProperty)"参数（这些参数来自声明绑定的VM上下文，而不是来自Custom Element的VM）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句