Невозможно вызвать функцию в модели представления из элемента <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 работает отлично. Я тоже стараюсь $parent.save() в #btn2 но это не работа Любая идея?

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="[e-mail]" 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");
    }
}

---

Обновление Я попробовал предложить Фабио, и это работает.

Другой вопрос: посмотрите на диалог aurelia, они называют testDelegate функция view-модели внутри <content> элемент похож на мой случай. Они не используют view-model.ref, Я смотрю на исходный код, но не выясняю, где они обрабатывают этот вызов. Может быть, я упустил какой-то пункт или здесь есть соглашения. Кто-нибудь знает, как они это делают?

Answer 1

Вы можете поместить view-модель create-location в свойство, используя 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="[e-mail]" fax="123456" view-model.ref="contact"></contact>

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

</create-location>

Тем не менее, я думаю, что было бы лучше, если бы вы воссоздали весь компонент. Там нет необходимости использовать <require> внутри содержимого компонента, и, возможно, вы могли бы поместить вторую кнопку сохранения в представлении создания местоположения.