Transforming old code to ember component

currently i'm starting with Ember, and i'm loving it! I'm with some difficulties, especially when it comes to components.

For you to understand, I'm going through old code to Ember, and I would like to turn this code into a Component, but I do not know actually how to start, since I do not know how to catch the button being clicked, and I also realized that Ember has several helpers, maybe I do not need any of this giant code to do what I want.

This is the old code result: http://ift.tt/1GtAl5O

    var eventObj = {};
    var eventInstances = {};
    var actual;
    var others;
    var clicked;

    var createEventInstance = function (obj) {
        for (var key in obj) {
            eventInstances[key] = new Event(obj[key]);
        }
    };

    var returnStyle = function (inCommon) {
        var $inCommon = inCommon;

        $inCommon.css({
            width: '342.4px',
            minWidth: '342.4px'
        });

        $inCommon.find('.cta').removeClass('hidden');
        $inCommon.find('.event-close').removeClass('inline');
        $inCommon.find('.event-info_list').removeClass('inline');
        $inCommon.removeClass('hidden');

        $inCommon.find('.expanded').slideUp();
        $inCommon.find('.expanded').slideUp();

        $inCommon.find('.event-arrow').remove();
        $inCommon.find('h2').find('ul').remove('ul');
    };

    var Event = function (id) {
        this.id = id;
    };

    Event.prototype.expandForm = function () {
        actual.css('width', '100%');
        actual.find('.event-info_list').addClass('inline');
        actual.find('.expanded').slideDown().css('display', 'block');
        actual.find('.event-close').addClass('inline');
    };

    Event.prototype.close = function () {
        returnStyle(actual);
        returnStyle(others);
    };

    Event.prototype.hideElements = function () {
        clicked.addClass('hidden');
        others.addClass('hidden');
    };

    Event.prototype.maskPhone = function () {
        $('[name$=phone]').mask('(99) 99999-9999', {
            placeholder: '(00) 0000-0000'
        });
    };

    $('.submit-form').on('click', function (e) {
        e.preventDefault();
        var id = '.' + $(this).data('id');

        var name = $(id).children('#person-name').val();
        var email = $(id).children('#person-email').val();
        var guests = $(id).children('#person-obs.guests').val();
    var phone = $(id).children('#person-phone').val();
        var participants = $(id).children('#booking-participants').val();

        if (name === '' || email === '' || phone === '' || participants === '' || guests === '') {
            alert('Preencha os campos obrigatórios.');
        } else {
            $(id).submit();
        }
    });

    Event.prototype.createDropDown = function () {
        actual.find('h2').addClass('event-change')
            .append('<span class="event-arrow" aria-hidden="true">&#9660;</span>')
            .append(function () {
                var self = $(this);
                var list = '<ul class="dropdown hidden">';

                $('.event').each(function (index) {
                    if ($(this).find('h2')[0] != self[0]) {
                        list += '<li data-index="' + index + '">' + $(this).find('h2').text() + '</li>';
                    }
                });
                return list;
            }).click(function () {
                if ($(this).attr('data-expanded') == true) {
                    $(this).find('ul').toggleClass('hidden');
                    $(this).attr('data-expanded', false);
                } else {
                    $(this).find('ul').toggleClass('hidden');
                    $(this).attr('data-expanded', true);
                }
            }).find('li').click(function (e) {
                e.stopPropagation();
                actual.find('.event-info_list').removeClass('inline');
                actual.find('h2').attr('data-expanded', false);
                actual.find('h2').removeClass('event-change');
                actual.find('.expanded').slideUp().css('display', 'inline-block');
                others.removeClass('hidden');
                actual.find('.cta').removeClass('hidden');
                actual.find('h2').find('.event-arrow').remove();
                actual.find('h2').off('click');
                actual.find('h2').find('ul').remove('ul');
                $($('.event')[$(this).attr('data-index')]).find('.cta').trigger('click');
            });
    };

    Event.prototype.open = function () {
        actual = $('[data-id="' + this.id + '"]');
        others = $('.event').not(actual);
        clicked = actual.find('.cta');

        this.hideElements();
        this.expandForm();
        this.createDropDown();
        this.maskPhone();
    };

    $('.event').each(function (i, event) {
        var prop = 'id' + $(event).data('id');
        var value = $(event).data('id');

        eventObj[prop] = value;
    });
    createEventInstance(eventObj);

Basically i have this boxes, which box represent one booking in some event (will be populate by the server). When the user clicks in one box, this boxes expands and the other disappear. But than a dropbox will be created with the other boxes, so the user can navigate in the events by this dropdown.

I didn't do much with Ember, i transform the "events" div into a component with the name "BookingBoxComponent" and two actions:

SiteApp.BookingBoxComponent = Ember.Component.extend({
  actions:
    open: function() {
      // HOW COULD I ACCESS THE CLICKED BUTTON HERE?
    },

    close: function() {
    }
});

As you can see, i put two actions, one for opening the box and other for closing, should i just put the logic in both, or i can improve this like a Ember way?

I don't know if i am asking to much here, so if i am, at least i would like to know how to access the button clicked in the open method, i was trying passing as a parameter, like:

<button {{action 'open' this}}></button>

But didn't work.

I could offer 50 of my points to someone who help transform the old cold in a Ember way code.

Thanks.