nicht Funktion im Hinblick Modell von <content> Elemente nennen kann

Question

Wenn ich Schaltfläche klicken #btn1 oder #btn2 Speicher, sagt die Konsole, dass:

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 

Aber die äußere Taste #btn3 gut funktioniert. Ich versuche auch $parent.save() in #btn2, aber es ist nicht funktionieren. Irgendeine Idee?

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> 

create-location.html

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

create-location.js

import {bindable} from 'aurelia-framework' 

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

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

---

Update Ich versuchte Fabio suggest und it works.

Eine andere Frage: Sehen Sie sich aurelia dialog, rufen sie testDelegate Funktion Sicht-Modell innerhalb <content> Element ähnlich wie mein Fall. Sie verwenden view-model.ref nicht. Ich schaue mir den Quellcode an, aber ich finde nicht heraus, wo sie diesen Aufruf verarbeiten. Vielleicht verpasse ich einen Punkt oder sind hier Konventionen. Weiß jemand, wie sie das machen?

Answer 1

Sie könnten das Ansichtsmodell des Erstellungsorts in eine Eigenschaft einfügen, indem Sie view-model.ref verwenden und dann diese Eigenschaft zum Aufrufen von save() verwenden. Gefällt mir:

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

Trotzdem denke ich, es wäre besser, wenn Sie die gesamte Komponente neu erstellen. Sie müssen <require> nicht innerhalb des Inhalts der Komponente verwenden, und vielleicht könnten Sie die zweite Schaltfläche zum Speichern in die Ansicht des Erstellungsbereichs einfügen.