CODEWITHSUNDEEP
aurelia
Dustin
Dustin

Reputation: 4185

Calling a component function outside of the component

In Aurelia, say I have custom component named popup that has an open and close method on it. I can call those methods in the component, but how would I call them from outside the component?

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

Notice in app.html I'm adding a button to try to close the modal. Obviously close() won't work because it is looking for that method in app.js. How do I call the close method in popup.js?

Here is a working Plunker example of the above.

Upvotes: 0

Views: 1883

Answers (2)

Sylvain
Sylvain

Reputation: 19249

You can get a hold of the view model of the component by using view-model.ref:

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

and then call close:

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

here is the plunker

Upvotes: 3

Dustin
Dustin

Reputation: 4185

Oh, I think I figured it out with 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>

Upvotes: 1

Related Questions