Categories


Archives


Recent Posts


Categories


Magento 2: Understanding the links default in uiElement Objects

astorm

Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

When Magento 2 creates a new constructor functions based on the uiElements constructor functions, Magento 2 will often use a links default

return Element.extend({
    defaults: {
        /* ... */
        links: {
            value: '${ $.provider }:${ $.dataScope }'
        }
        /* ... */            
    },
/* ... */        

The links property looks similar to the imports and exports feature, in that it uses template literals to create an identifier string.

{
    value: 'checkoutProvider:shippingAddress.firstname'
}

When you (or Magento) use a links value, you’re both importing and exporting the properties from the specified registry entry. If you’re not familiar with importing and exporting, you can read about them in the Magento 2: uiClass Data Features article, part of the UI Components series. The above value translates to the following uiRegistry key

reg = requirejs('uiRegistry');
reg.get('checkoutProvider').shippingAddress.firstname;

For the curious, these links are setup in the following method

#File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js
initLinks: function () {
    return this.setListeners(this.listens)
               .setLinks(this.links, 'imports')
               .setLinks(this.links, 'exports')
               .setLinks(this.exports, 'exports')
               .setLinks(this.imports, 'imports');
},

Copyright © Alan Storm 1975 – 2019 All Rights Reserved

Originally Posted: 18th November 2016