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:
- Why is it that defining actions on both the Component file and the hbs one didn't change the result?
- 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.
- Is there a better approach than my solution?
Thanks
Aucun commentaire:
Enregistrer un commentaire