将旧代码转换为 ember 组件

Question

目前我从 Ember 开始，我很喜欢它！我遇到了一些困难，尤其是在组件方面。

为了你的理解，我正在通过旧代码到 Ember，我想把这段代码变成一个组件，但我实际上不知道如何开始，因为我不知道如何捕捉按钮被点击，我也意识到 Ember 有几个助手，也许我不需要任何这个巨大的代码来做我想做的事。

这是旧代码结果：http://codepen.io/anon/pen/WQjobV?editors=110

    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);

基本上我有这个框，该框代表在某些事件中的一个预订（将由服务器填充）。当用户单击一个框时，该框会展开，而另一个框会消失。但是会与其他框一起创建一个下拉框，因此用户可以通过此下拉菜单在事件中导航。

我对 Ember 做的不多，我将“事件” div 转换为一个名为 "BookingBoxComponent" 的组件和两个操作：

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

    close: function() {
    }
});

如您所见，我设置了两个动作，一个用于打开盒子，另一个用于关闭，我应该将逻辑都放入其中，还是可以像 Ember 方式一样改进它？

我不知道我是否在这里要求太多，所以如果我是，至少我想知道如何访问在打开方法中单击的按钮，我试图作为参数传递，例如：

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

但是没有用。

我可以将我的 50 分提供给以 Ember 方式代码帮助改变旧寒冷的人。

谢谢。

Answer 1

事件对象将作为最后一个参数与每个操作一起传递，因此当您指定this 时，您实际上是在传递该块中具有上下文的任何对象。在你的打开函数中，不要传递this 并做

open: function(event) {
  // event.currentTarget would be the button
}

现在您可以执行 event.currentTarget 或 event.target 之类的操作