Вызов функции компонента вне компонента

Question

В Aurelia, скажем, у меня есть пользовательский компонент с именем popup, который имеет на нем метод и close. Я могу назвать эти методы в компоненте, но как бы назвать их извне компонента?

app.html:

<template> 
    <require from="popup"></require> 

    Pop-up test 
    <popup> 
    <popup-body> 
     <button click.trigger="close()">Close</button> 
    </popup-body> 
    </popup> 
</template> 

popup.html:

<template> 
    <button click.trigger="open()">Open</button> 
    <button click.trigger="close()">Close</button> 

    <div class="popup" show.bind="visible"> 
    Pop-up! 
    <content select="popup-body"></content> 
    </div> 
</template> 

popup.js

export class Popup { 
    constructor() { 
    this.visible = false; 
    } 

    open() { 
    this.visible = true; 
    } 

    close() { 
    this.visible = false; 
    } 
} 

Уведомление в app.html Я добавляю кнопку, чтобы попытаться закрыть модальный. Очевидно, что close() не будет работать, потому что он ищет этот метод в app.js. Как вызвать метод close в popup.js?

Вот working Plunker example из вышеперечисленного.

Answer 1

Вы можете ухватить модели представления компонента с помощью view-model.ref:

<popup view-model.ref="popup"> 

, а затем вызвать близко:

export class App { 
    close(){ 
    popup.close(); 
    } 
} 

here is the plunker

Answer 2

О, я думаю, что я понял это с view-model.ref

<template> 
    <require from="popup"></require> 

    Pop-up test 
    <popup view-model.ref="popup"> 
    <popup-body> 
     <button click.trigger="popup.close()">Close</button> 
    </popup-body> 
    </popup> 
</template>