jeudi 20 septembre 2018

Click events on Ember

I'm discovering EmberJS and started to migrate an existing website to this framework. I was having an issue with a Bootstrap-based dropdown. This issue actually helped me understand Ember's concepts a bit better but I still have some questions.

I used the ember-bootstrap module to generate this dropdown (among other things) and here is what the code is supposed to be:


    Sort by 
    
        Price low to high
        Price high to low
    


Now, I want some javascript code to be executed when the user clicks on one of the items. After checking the module's documentation, I found where the menu item component was defined and edited its code as follows:

export default Component.extend({
    layout,
    classNameBindings: ['containerClass'],
    ....
    actions: {
        // My addition
        sortByPrice(param){
            alert("sorting");
        },
    // End of the addition

    toggleDropdown() {
        if (this.get('isOpen')) {
            this.send('closeDropdown');
        } else {
            this.send('openDropdown');
        }
    },

Then I updated the hbs file as follows:


   Prix croissant


This didn't work, and that's why you I added the *action* to the link-to element as well and declared similarly the action on its component file.

import LinkComponent from '@ember/routing/link-component';
   export default LinkComponent.extend({
   actions: {
      sortByPrice(param){
        alert("sorting");
        console.log("sorting");
      }
   }
});

As you can see, the *link-to* component extends the LinkComponent one. I eventually understood that it wasn't possible for this element to handle click events natively, as explained in this thread.

Out of frustration, I ended up with a less elegant approach that still does the trick:


   Sort by 
   
      <a class="dropdown-item" onclick="sortByPrice('low_to_high'); return false;" href="#">Price low to high</a>
   
 

Now here are my questions:

  1. Why is it that defining actions on both the Component file and the hbs one didn't change the result?
  2. Why doesn't the LinkComponent handle click events natively? I get that a link is supposed to redirect users to a new page (which is still arguable), but the DOM event is still fired, so does Ember deliberately ignore it and choose not to let developers handle it? I want to know the logic behind this.
  3. Is there a better approach than my solution?

Thanks




Aucun commentaire:

Enregistrer un commentaire