How does Magento_Ui/js/core/app works

Development UI Components

dmitrii_fediuk (Dmitrii Fediuk) January 5, 2016, 4:38am 1

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/TemplateEngine/Xhtml/Result.php#L121-L123


return '<script type="text/x-magento-init"><![CDATA['
. '{"*": {"Magento_Ui/js/core/app": ' . str_replace(['<![CDATA[', ']]>'], '', $content) . '}}'
. ']]></script>';

data in my case is:

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/types.js#L35-L43


set: function (types) {
    types = types || {};


    utils.extend(store, types);


    _.each(types, function (data, type) {
        store[type] = flatten(data);
    });
},

layout is:

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L69-L72


function run(nodes, parent) {
    _.each(nodes || [], layout.iterator.bind(layout, parent));
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L70-L70


_.each(nodes || [], layout.iterator.bind(layout, parent));

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L74-L80


iterator: function (parent, node) {
    var action = _.isString(node) ?
        this.addChild :
        this.process;


    action.apply(this, arguments);
},

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L93-L99


if (node) {
    this.addChild(parent, node)
        .manipulate(node)
        .initComponent(node);


    run(node.children, node);
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L150-L160


initComponent: function (node) {
    if (!node.component) {
        return this;
    }


    loadDeps(node)
        .then(loadSource)
        .done(initComponent);


    return this;
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L42-L50


function loadDeps(node) {
    var loaded = $.Deferred();


    registry.get(node.deps, function () {
        loaded.resolve(node);
    });


    return loaded.promise();
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L52-L61


function loadSource(node) {
    var loaded = $.Deferred(),
        source = node.component;


    require([source], function (constr) {
        loaded.resolve(node, constr);
    });


    return loaded.promise();
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/core/renderer/layout.js#L63-L67


function initComponent(node, Constr) {
    var component = new Constr(_.omit(node, 'children'));


    registry.set(node.name, component);
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/form/components/html.js#L24-L31


initialize: function () {
    _.bindAll(this, 'onContainerToggle', 'onDataLoaded');


    this._super()
        .initAjaxConfig();


    return this;
},

github.com

magento/magento2/blob/c58d2d/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;
},

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/form/element/wysiwyg.js#L18-L20


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

value is cms_block_form.block_form_data_source:data.content in my case:

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js#L114-L125


function setData(maps, property, data) {
    var direction   = data.direction,
        map         = maps[direction];


    data.linked = false;


    (map[property] = map[property] || []).push(data);


    direction = direction === 'imports' ? 'exports' : 'imports';


    setLinked(maps[direction][property], data);
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js#L95-L112


function setLinked(map, data) {
    var match;


    if (!map) {
        return;
    }


    match = _.findWhere(map, {
        linked: false,
        target: data.target,
        property: data.property
    });


    if (match) {
        match.linked = data;
        data.linked = match;
    }
}

github.com

magento/magento2/blob/c58d2d/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js#L144-L144


updateValue(data, owner, target, value);

How are UI Components rendered?

dmitrii_fediuk (Dmitrii Fediuk) January 5, 2016, 4:41am 2

See also:

How are the UI Components rendered