Run a function from defined on the client side

Learning Team
1

Hi,

I’m using a JavaScript library to create some animations, and I’d like know how to trigger these animations from my Controller. This library doesn’t have any npm version, so I had to use the ember-cli to import it to my code. From what I understood, this client code isn’t available to Ember so I don’t know how to call these functions from Ember. As of now, my solution is :

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
     <a class="dropdown-item" onclick="sortByPrice('low_to_high');" href="#">Prix croissant</a>
     <a class="dropdown-item" onclick="sortByPrice('high_to_low');" href="#">Prix décroissant</a>
</div>

sortByPrice() is a function I wrote myself (in app.js) and it triggers the animation. What would be the more elegant (Ember) way to achieve the same result?

Thanks

2

Hi @IAmAndre. The first thing I would suggest is that instead of putting a global function into onclick, you can use Ember actions. So you would do something like:

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
   <a class="dropdown-item" onclick={{action sortByPrice 'low_to_high'}} href="#">Prix croissant</a>
   <a class="dropdown-item" onclick={{action sortByPrice 'high_to_low'}} href="#">Prix décroissant</a>
</div>

And on the corresponding Controller you would put the sortByPrice method:

export default Controller.extend({
  sortByPrice(sortOrder) {
    // do work here
  }
})

This part of your question:

I don’t fully understand. If you mean that you used app.import to get the code into your application, it should indeed be available to be called from your Ember code.