How does data linking work for an UI Component

dmitry_fedyuk · February 2, 2016, 3:46pm

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/element/element.js#L170-L186


/**
 * Initializes links between properties.
 *
 * @returns {Element} Chainbale.
 */
initLinks: function () {
    this.setListeners(this.listens)
        .setLinks(this.links, 'imports')
        .setLinks(this.links, 'exports');


    _.each({
        exports: this.exports,
        imports: this.imports
    }, this.setLinks, this);


    return this;
},

links and listeners look like this:

Common links and listeners

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js#L39-L47


listens: {
    visible: 'setPreview',
    '${ $.provider }:data.reset': 'reset',
    '${ $.provider }:${ $.customScope ? $.customScope + "." : ""}data.validate': 'validate'
},


links: {
    value: '${ $.provider }:${ $.dataScope }'
}

Other examples of links and listeners

github.com

magento/magento2/blob/c53d060/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L34-L37


listens: {
    email: 'emailHasChanged',
    emailFocused: 'validateEmail'
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/product-grid.js#L29-L33


listens: {
    '${ $.productsProvider }:data': '_showMessageAssociatedGrid _handleManualGridOpening',
    '${ $.productsMassAction }:selected': '_handleManualGridSelect',
    '${ $.configurableVariations }:productMatrix': '_showButtonAddManual _switchProductType'
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/select_attributes.js#L28-L31


listens: {
    '${ $.multiselectName }:selected': 'doSelectedAttributesLabels',
    '${ $.multiselectName }:rows': 'doSelectSavedAttributes'
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/components/tab_group.js#L13-L15


listens: {
    '${ $.provider }:data.validate': 'onValidate'
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/form/element/ui-select.js#L55-L58


listens: {
    listVisible: 'cleanHoveredElement',
    filterInputValue: 'filterOptionsList'
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/grid/listing.js#L43-L47


listens: {
    elems: 'updatePositions updateVisible',
    '${ $.provider }:reload': 'onBeforeReload',
    '${ $.provider }:reloaded': 'onDataReloaded'
},

How is it processed

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js#L171-L192


setListeners: function (listeners) {
    var owner = this,
        data;


    _.each(listeners, function (callbacks, sources) {
        sources = sources.split(' ');
        callbacks = callbacks.split(' ');


        sources.forEach(function (target) {
            callbacks.forEach(function (callback) {
                data = parseData(owner.name, target, 'imports');


                if (data) {
                    setData(owner.maps, callback, data);
                    transfer(owner, data, callback);
                }
            });
        });
    });


    return this;
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js#L149-L168


function transfer(owner, data) {
    var args = _.toArray(arguments);


    if (data.target.substr(0,1) === '!') {
        data.target = data.target.substr(1);
        data.inversionValue = true;
    }


    if (owner.name === data.target) {
        args.unshift(owner);


        setLink.apply(null, args);
    } else {
        registry.get(data.target, function (target) {
            args.unshift(target);


            setLink.apply(null, args);
        });
    }
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js#L127-L147


function setLink(target, owner, data, property, immediate) {
    var direction = data.direction,
        formated = form(target, owner, data.property, property, direction),
        callback,
        value;


    owner = formated.owner;
    target = formated.target;


    callback = updateValue.bind(null, data, owner, target);


    owner.component.on(owner.property, callback, target.component.name);


    if (immediate) {
        value = getValue(owner);


        if (notEmpty(value)) {
            updateValue(data, owner, target, value);
        }
    }
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js#L40-L62


function updateValue(data, owner, target, value) {
    var component = target.component,
        property = target.property,
        linked = data.linked;


    if (data.mute) {
        return;
    }


    if (linked) {
        linked.mute = true;
    }


    if (owner.component !== target.component) {
        value = data.inversionValue ? !utils.copy(value) : utils.copy(value);
    }


    component.set(property, value);


    if (linked) {
        linked.mute = false;
    }
}

dmitry_fedyuk · February 2, 2016, 3:48pm