Aurelia - 在嵌套組件上調用函數

Question

我想從父級調用子組件的函數。我有辦法做到這一點，但我想知道如果我錯過了更好的方法。

從Ashley Grant的blog post關於從自定義屬性訪問自定義元素的viewModel，我看到Aurelia將au添加到該元素，您可以通過該元素訪問viewModel。所以，如果我添加了一個嵌套的組件與裁判，就像這樣：

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

我可以調用一個函數就可以是這樣的：

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

這種感覺迂迴。我希望能夠通過參數訪問嵌套元素的viewModel到父類實現的鉤子，例如created(owningView, myView)，但我找不到它的路徑。

我錯過了更好的方法嗎？

編輯：我忘了補充一點，我需要從我調用該函數返回值，所以有訪問視圖模型本身就是最好

Answer 1

ref給你的元素。 view-model.ref爲您提供元素的視圖模型。

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

這樣稱呼它在父視圖模型：

this.childViewModel.someFunction(); 

Answer 2

如果你只有嵌套元素或唐的一個實例不在乎多個嵌套元素是否響應該事件。然後，你可以使用這個標準的JavaScript事件功能：

一個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); 
    } 
}