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

问题描述

我有一个自定义元素，它将接受用户输入，点击[保存]按钮，我想将信息传递给父视图模型，这样我就可以将它发送到服务器并转到下一部分。我打算简化这个例子：

I have a custom element which will take user input, and on [save] button click, I want to pass information to the parent view-model so I can send it to the server and move to the next section. I'm going to simplify this for example's sake:

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

For a demo, see (app.js and app.html represent parent-view-model.js and parent-view-model.html):

它有效！的种类。不幸的是，这个似乎绑定到 my-element 而不是 parent-view-model ，所以在这个例子中，打印到控制台的是： parent property：undefined 。这是行不通的。

It works! Kind of. Unfortunately, this seems to be bound to my-element instead of parent-view-model, so in this example, what is printed to console is: parent property: undefined. That will not work.

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

I know I can utilize the EventAggregator to facilitate some communication between the custom element and the view-model, but if I can help it I'd like to avoid the added complexity.

推荐答案

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

You have two options for this. You could handle this using Custom Events, or you can do it using the call binding that Anj mentioned in his answer. Which one you use depends on your actual use case.

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

If you want the custom element to be able to call a method on your parent VM and pass data out of the custom element, then you should use a Custom Event as shown in this gist: 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);
  }
}

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

You would basically attach any data you need to pass on the detail property of the Custom Event. In the event binding declaration, you would add $event as a parameter to the function and then check the detail property of $event in your event handler (you could also just pass $event.detail if you wanted).

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

If you want the custom element to be able to call a method on your parent VM and have data passed in from the parent VM (or from another custom element or something), then you should use the call binding. You can specify arguments that will be passed to the method by specifying them in the binding declaration (foo.call="myMethod(myProperty)". These arguments come from the VM context where the binding is being declared, not from the Custom Element's VM).

这篇关于在Aurelia中，我可以绑定我的自定义元素调用的包含视图模型的函数吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！