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

Question

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

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来促进自定义元素和视图模型之间的某些通信,但如果我能帮助它,我想避免增加复杂性.

Answer 1

你有两种选择.您可以使用自定义事件处理此问题,或者您可以使用callAnj在其答案中提到的绑定来执行此操作.您使用哪一个取决于您的实际用例.

如果您希望自定义元素能够在父虚拟机上调用方法并将数据传递出自定义元素,那么您应该使用自定义事件,如下所示: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;
  }
}

我-element.html:

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

我-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).

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

Answer 2

经过aurelia docs hub后,我能够解决这个问题.我不知道可能涉及的所有细微差别,但是对于这个简单的例子,我能够通过以下简单的更改来修复它:

在parent-view-model.html(或gist-run示例中的app.html)中,更改save.bind="parentMethod"为save.call="parentMethod()"

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

以下是aurelia网站的文档.