How does event handling work for an UI Component

dmitry_fedyuk · February 2, 2016, 3:01pm

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/form.js#L51-L56


adapter.on({
    'reset': this.reset.bind(this),
    'save': this.save.bind(this, true),
    'saveAndContinue': this.save.bind(this, false),
    'saveAndApply': this.saveAndApply.bind(this, true)
});

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/form.js#L75-L81


save: function (redirect) {
    this.validate();


    if (!this.source.get('params.invalid')) {
        this.submit(redirect);
    }
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/form.js#L102-L108


/**
 * Validates each element and returns true, if all elements are valid.
 */
validate: function () {
    this.source.set('params.invalid', false);
    this.source.trigger('data.validate');
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/events.js#L142-L160


/**
 * Triggers event and executes all attached callbacks.
 *
 * @param {String} name - Name of the event to be triggered.
 * @returns {Boolean}
 */
trigger: function (name) {
    var handlers,
        args;


    handlers = getEvents(this, name),
    args = _.toArray(arguments).slice(1);


    if (!handlers || !name) {
        return true;
    }


    return trigger(handlers, args);
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/events.js#L14-L30


/**
 * Returns events map or a specific event
 * data associated with a provided object.
 *
 * @param {Object} obj - Key in the events weakmap.
 * @param {String} [name] - Name of the event.
 * @returns {Map|Array|Boolean}
 */
function getEvents(obj, name) {
    var events = eventsMap.get(obj);


    if (!events) {
        return false;
    }


    return name ? events.get(name) : events;
}

events looks like this:

handlers looks like this:

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/events.js#L71-L91


/**
 * Invokes provided callbacks with a specified arguments.
 *
 * @param {Array} handlers
 * @param {Array} args
 * @returns {Boolean}
 */
function trigger(handlers, args) {
    var bubble = true,
        callback;


    handlers.forEach(function (handler) {
        callback = handler.callback;


        if (callback.apply(null, args) === false) {
            bubble = false;
        }
    });


    return bubble;
}

dmitry_fedyuk · February 2, 2016, 3:05pm