In Aurelia, can I bind a function from my containing view-model to be called by my custom element?
<p>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:</p>

<p><code>my-element.js</code>:</p>

<pre><code>import { customElement, bindable } from 'aurelia-framework';

@customElement('my-element')
@bindable('save')
export class MyElement { }
</code></pre>

<p><code>my-element.html</code>:</p>

<pre><code>&lt;template&gt;
    &lt;button click.delegate="save()"&gt;Click this&lt;/button&gt;
&lt;/template&gt;
</code></pre>

<p><code>parent-view-model.js</code>:</p>

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

<p><code>parent-view-model.html</code>:</p>

<pre><code>&lt;template&gt;
    &lt;require from="./my-element"&gt;&lt;/require&gt;
    &lt;div class="content-panel"&gt;
        &lt;my-element save.bind="parentMethod"&gt;&lt;/my-element&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>

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

<p><a href="https://gist.run/?id=96b203e9ca03b62dfb202626c2202989" rel="noreferrer">https://gist.run/?id=96b203e9ca03b62dfb202626c2202989</a></p>

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

<p>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.</p>