Aurelia - 중첩 된 구성 요소의 함수 호출

Question

부모로부터 하위 구성 요소의 함수를 호출하려고합니다. 나는 그것을 할 수있는 방법이 있지만, 나는 더 나은 길을 놓치고 있는지 알고 싶다.

사용자 정의 요소에서 사용자 정의 요소의 viewModel에 액세스하는 것에 대한 Ashley Grant의 blog post에서 Aurelia가 요소에 au을 추가하고이를 통해 viewModel에 액세스 할 수 있음을 알았습니다. 나는이처럼 심판과 중첩 된 구성 요소를 추가한다면, :

<template> 
    <nested-element ref="childElement"></nested-element> 
</template> 

나는 이런 식의 함수를 호출 할 수

this.childElement.au.controller.viewModel.someFunction(); 

이 원형 교차로를 느낀다. created(owningView, myView)과 같이 상위가 구현하는 후크에 대한 매개 변수를 통해 중첩 요소의 viewModel에 액세스 할 수 있기를 기대했지만 경로를 찾을 수 없습니다.

더 나은 방법을 놓친 적이 있습니까?

편집 : 당신은 중첩 된 요소 또는 돈의 인스턴스가있는 경우 내가 전화 드렸습니다 함수에서 반환 값을 필요로하기 때문에 뷰 모델 자체에 대한 액세스 권한을 갖는

Answer 1

ref이 요소를 제공합니다. view-model.ref은 요소의 뷰 모델을 제공합니다. 상위 뷰 - 모델이 같은

<template> 
    <nested-element view-model.ref="childViewModel"></nested-element> 
</template> 

전화를 :

this.childViewModel.someFunction(); 

Answer 2

바람직하다 것을 추가하는 것을 잊었다 중첩 된 여러 요소가 이벤트에 응답하는 경우 신경 써야합니다. 그럼 당신은이 표준 자바 스크립트 이벤트 기능을 사용할 수 있습니다

bar.html에는

<template> 
    <h1>${value}</h1> 
    <input type="text" value.bind="value"></input> 
    <foo>text</foo> 
</template> 

bar.ts을

import {bindable} from 'aurelia-framework'; 
export class Bar { 

    @bindable value; 

    public valueChanged(newValue, oldValue) { 
    var event = new CustomEvent("some-event-name", { "detail": { message: "Hello from Bar", oldValue, newValue } }); 
    document.dispatchEvent(event); 
    } 
} 

foo.html을

<template> 
    <h1>${value}</h1> 
</template> 

foo.ts

import {bindable} from 'aurelia-framework'; 

export class Foo { 
    constructor() { 
    document.addEventListener("some-event-name", (e) => { 
     console.log('hello here is Foo, recieved event from Bar : ', e); 
    }, true); 
    } 
}