javascript - 将旧代码转换为 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 做太多事情，我将“events”div 转换为一个名为 “BookingBoxComponent” 和两个操作的组件:

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

    close: function() {
    }
});

正如你所看到的，我放置了两个 Action ，一个用于打开盒子，另一个用于关闭，我应该将逻辑放在两者中，还是可以像 Ember 方式一样改进它？

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

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

但没有成功。

我可以向那些通过 Ember 方式代码帮助治愈旧感冒的人提供 50 分。

谢谢。

Answer 1

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

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

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