Question

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

为了让您理解，我将旧代码发送到Ember，我想将此代码转换为Component，但我实际上并不知道如何启动，因为我不知道如何捕获点击按钮，我也意识到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);

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

我没有对Ember做太多事情，我改变了＆＃34;事件＆＃34; div成为名为"BookingBoxComponent"的组件和两个操作：

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

    close: function() {
    }
});

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

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

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

但没有工作。

我可以向有人用Ember方式代码帮助改变旧感冒的人提供我的50分。

感谢。

Answer 1

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

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

现在你可以做一些事情，比如event.currentTarget或event.target

将旧代码转换为ember组件

1 个答案: