vendredi 31 janvier 2020

Ember JS: Call component action from another component

I am new to ember JS and after looking through the doc I still have no idea or don't understand how to achieve the following.

I have a navbar component that includes a menu button component

//components/nav-bar.hbs

<nav>
   <LinkTo class="btn-1" @route="contact"><span>Contact</span></LinkTo>
   <LinkTo class="btn-1" @route="about"><span>About</span></LinkTo>
   <MenuButton>Menu</MenuButton>
</nav>

When this button is clicked I would like to toggle another component which is not a parent nor a child of menu-button component, nor of the nav-bar component

//components/nav-aside.hbs
<div class="core_page_cover">

</div>
<aside class="core_menu_aside">

</aside>


//components/nav-aside.js
import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class NavAsideComponent extends Component {
   @action
   toggle() {
       //toggle expanded | retracted class
   }
}

I have no idea how to call the toggle action when clicking on the button and I guess I am missing something...

Thanks a lot.




Aucun commentaire:

Enregistrer un commentaire