Categories


Archives


Recent Posts


Categories


Magento 2: uiElement Containers and _requested Defaults

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.

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

Two defaults you don’t need to worry too much about are the containers and _requested defaults.

#File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js
defaults: {
    _requesetd: {},
    containers: [],
    /* ... */
}

These are just properties that Magento’s initializing using the uiElement’s defaults feature. They confer no magic abilities on your objects.

Magento uses the .containers property to store the parent element of specific uiElement object. You’ll recall from the UI Component series that a UI Component is basically a tree of nested Knockout.js view models. When one uiElement object is injected into another, Magento calls the element’s initContainer method

#File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js

/**
 * Called when current element was injected to another component.
 *
 * @param {Object} parent - Instance of a 'parent' component.
 * @returns {Collection} Chainable.
 */
initContainer: function (parent) {
    this.containers.push(parent);

    return this;
},

which pushes a reference to the parent object onto the containers property.

The ._requested property serves a similar function. When Magento’s sets up the modules defaults

#File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js

initModules: function () {
    _.each(this.modules, function (name, property) {
        if (name) {
            this[property] = this.requestModule(name);
        }
    }, this);

    if (!_.isFunction(this.source)) {
        this.source = registry.get(this.provider);
    }

    return this;
},   

is uses the requestModule function to setup the async callback.

#File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js
requestModule: function (name) {
    var requested = this._requesetd;

    if (!requested[name]) {
        requested[name] = registry.async(name);
    }

    return requested[name];
}, 

The requestModule function uses the ._requested property to cache the async callbacks it has already created.

Both of these callbacks aren’t things you’ll typically use in your own objects – they’re just plain old variables the uiElement’s internals use.

Copyright © Alan Storm 1975 – 2017 All Rights Reserved

Originally Posted: 29th November 2016