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

我有一个自定义元素，它将接受用户输入，单击[保存]按钮，我想将信息传递给父视图模型，以便将其发送到服务器并移动到下一节。出于示例的考虑，我将对其进行简化：

my element.js

：

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

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

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

my element.html

：

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

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

父视图模型.html

：

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

<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）：

它起作用了！有点不幸的是，

此

似乎绑定到

我的元素

，而不是

父视图模型

，因此在本例中，打印到控制台的内容是：

父属性：未定义

。那是行不通的

---

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

我在aurelia文档中心浏览了一段时间后就能够解决这个问题。我不知道可能涉及的所有细微差别，但对于这个简单的示例，我能够通过执行以下简单的更改来修复它：

在parent-view-model.html（或gist运行示例中的app.html）中，将

save.bind=“parentMethod”

更改为

save.call=“parentMethod（）”

但是，我仍然不确定如何将数据从自定义元素传递到父视图模型的方法中

---

您有两种选择。您可以使用自定义事件来处理此问题，也可以使用Anj在回答中提到的

调用
绑定来处理此问题。您使用哪一个取决于您的实际用例

如果希望自定义元素能够调用父VM上的方法并从自定义元素中传递数据，则应使用如下要点所示的自定义事件：

app.html：

my-element.html：

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

如果希望自定义元素能够调用父VM上的方法，并从父VM（或其他自定义元素或其他内容）传入数据，则应使用
调用
绑定。您可以通过在绑定声明中指定参数来指定将传递给方法的参数（
foo.call=“myMethod（myProperty）”
。这些参数来自声明绑定的VM上下文，而不是来自自定义元素的VM）
 要将参数化函数传递给自定义子组件，请编写以下代码（根据文档）

父视图模型

private\u生成（myParam:string）{
返回myParam+“世界”；
}

父视图



子视图


${generator（{myParam:“hello”}）}
更新了@rodu的评论链接：
<template>
    <input type="text" value.bind="eventDetailValue" />
    <button click.delegate="save()">Click this</button>
</template>

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);
  }
}