이 <content> 요소

Question

에서보기 모델의 함수를 호출 할 수 없습니다 콘솔은 말한다 :

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 outter는 버튼을 누릅니다. 또한 을 #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="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> 요소 내부 뷰 - 모델의 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>을 사용할 필요가 없으며 두 번째 저장 버튼을 생성 위치보기에 넣을 수 있습니다.