无法从 <content> 元素调用视图模型中的函数

Question

当我点击按钮 #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

但是外部按钮 #btn3 工作正常。我也在 #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>

创建-location.html

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

创建-location.js

import {bindable} from 'aurelia-framework'

export class CreateLocationCustomElement {
    @bindable contact;
    @bindable workingTime;

    save() {
        alert("save");
    }
}

更新我尝试了 Fabio 的建议和 it works.

另一个问题：看看aurelia dialog，他们在<content>元素中调用了view-model的testDelegate函数，类似于我的情况。他们不使用 view-model.ref。我查看了源代码，但没有找到他们处理该调用的位置。也许我错过了一些要点或者这里有约定。有谁知道他们是怎么做到的？

Answer 1

您可以使用 view-model.ref 将创建位置的视图模型放入属性，然后使用属性调用 save()。像这样：

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

尽管如此，我认为重新创建整个组件会更好。无需在组件内容中使用 <require>，也许您可以将第二个保存按钮放在创建位置的视图中。

无法从 <content> 元素调用视图模型中的函数

Cannot call function in view model from <content> element

html

javascript

aurelia

aurelia-dialog

aurelia-templating