Recently I started learning Ember and I'm really enjoying it! However, I'm facing some difficulties, especially when it comes to working with components.
Currently, I'm trying to convert some old code into a Component in Ember but I'm not sure where to start. I'm unsure how to capture the button click event and I've also noticed that Ember has many built-in helpers which might simplify the process.
Here is the result of the old code: http://codepen.io/anon/pen/WQjobV?editors=110
// Old code snippets here
I have a series of boxes, where each box represents a booking for an event (this data will be fetched from the server). When a user clicks on a box, that box expands while the others disappear. Additionally, a dropdown menu should be created to allow users to navigate between events.
In my Ember project, I converted the "events" div into a component called "BookingBoxComponent" with two actions:
SiteApp.BookingBoxComponent = Ember.Component.extend({
actions:
open: function() {
// HOW CAN I HANDLE THE CLICK EVENT HERE?
},
close: function() {
}
});
As you can see, I have defined two actions for opening and closing the box. Should I simply include the logic in these actions, or is there a more efficient Ember-specific way?
If it's not too much to ask, I'd like to know how to access the clicked button in the open method. I tried passing it as a parameter like this:
<button {{action 'open' this}}></button>
But it didn't work as expected.
If someone can help me transform the old code into a more Ember-friendly format, I would be willing to offer 50 points as a token of appreciation.
Thank you.