Javascript 无法从<；调用视图模型中的函数；内容>；要素

当我单击按钮

#btn1

或

#btn2

保存时，控制台显示：

Uncaught Error: save is not a function
    getFunction @ aurelia-binding.js:1971
    evaluate @ aurelia-binding.js:1565
    callSource @ aurelia-binding.js:4989
    (anonymous function) @ aurelia-binding.js:5013
    handleDelegatedEvent @ aurelia-binding.js:3211

但是outter按钮可以正常工作。我还在

#btn2

中尝试

$parent.save（）。有什么想法吗

app.html

<create-location contact.two-way="contact" working-time.two-way="workingTime">
    <require from="dist/component/working-time"></require>
    <working-time title="Working Time" view-model.ref="workingTime"></working-time>
    <require from="dist/component/contact"></require>
    <contact title="Contact" phone="123" email="user@example.com" fax="123456" view-model.ref="contact"></contact>

    <button id="btn1" type="button" click.delegate="save()">Save (=>error<=)</button>
    <button id="btn2" type="button" click.delegate="$parent.save()">Save (=>error also<=)</button>
</create-location>

<template>
    <button id="btn3" type="button" click.delegate="save()">Save (=>it works<=)</button>
    <content></content>
</template>


更新
我试过法比奥的建议，然后

另一个问题：看，他们在
元素中调用了视图模型的
testDelegate
函数，类似于我的例子。他们不使用
视图model.ref
。我看了一下源代码，但没有发现他们在哪里处理这个调用。也许我错过了一些要点，或者这里有一些惯例。有人知道他们是如何做到这一点的吗？
您可以使用
视图模型.ref将创建位置的视图模型放在属性中，然后使用该属性调用
保存（）
。像这样：

<create-location view-model.ref="createLocationVM" contact.two-way="contact" working-time.two-way="workingTime">
    <require from="dist/component/working-time"></require>
    <working-time title="Working Time" view-model.ref="workingTime"></working-time>
    <require from="dist/component/contact"></require>
    <contact title="Contact" phone="123" email="user@example.com" fax="123456" view-model.ref="contact"></contact>

    <button id="btn1" type="button" click.delegate="createLocationVM.save()">Save (=>error<=)</button>

</create-location>


保存（=>错误因为创建位置页面是服务器上的预渲染页面，我希望aurelia控制浏览器上的整个页面（使用绑定、自定义组件等），所以我创建
创建位置
组件并使用aurelia增强功能（）。我想知道这是否是一种正确的方法。你做过类似的事情吗？顺便说一句，看看。他们有一个
testDelegate
函数，但我不知道怎么做。他们根本不使用
view model.ref
。
<create-location view-model.ref="createLocationVM" contact.two-way="contact" working-time.two-way="workingTime">
    <require from="dist/component/working-time"></require>
    <working-time title="Working Time" view-model.ref="workingTime"></working-time>
    <require from="dist/component/contact"></require>
    <contact title="Contact" phone="123" email="user@example.com" fax="123456" view-model.ref="contact"></contact>

    <button id="btn1" type="button" click.delegate="createLocationVM.save()">Save (=>error<=)</button>

</create-location>