Magento 2: What Populates “elems” in a UI Component

Question

The top level KnockoutJS template of listing UI Component looks like this

<!-- File: vendor/magento//module-ui/view/base/web/templates/collection.html -->

<each args="data: elems, as: 'element'">
    <render if="hasTemplate()"/>
</each>

This is translated by Magento into the following raw KnockoutJS code.

<!-- ko foreach: {data: elems, as: 'element'} -->
    <!-- ko if: hasTemplate() --><!-- ko template: getTemplate() --><!-- /ko --><!-- /ko -->
<!-- /ko -->

In either case, this template will foreach over the view model's elems property.

If I look at the RequireJS module that (I think>) returns the view model's constructor class

vendor/magento/module-ui/view/base/web/js/lib/core/collection.js

I see the insertChild method appears to add to the elems property.

What's less clear to me is: Where does Magento actually call insertChild to populate the elems and/or how is elems populated with the view models that make up a collection of UI Components?

Answer 1

The only info I can find is

registry.get(component.parentName).insertChild(component, val.value);

on line 321 of

vendor/magento/module-ui/view/base/web/js/core/renderer/layout.js

It appears this is inside a function that merges components?

merge: function (components) {
   ...
}

This is used on line 73 (run function) of the same file (layout.js) where it's used to merge nodes.

function run(nodes, parent, cached, merge) {
    if (_.isBoolean(merge) && merge) {
        layout.merge(nodes);

        return false;
    }

    if (cached) {
        cachedConfig[_.keys(nodes)[0]] = JSON.parse(JSON.stringify(nodes));
    }

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

This run functions is used in 2 functions (process and merge - both in layout.js) but I can't fully figure out what they do.

Update

I've just seen the following in the dev docs - http://devdocs.magento.com/guides/v2.1/ui_comp_guide/concepts/ui_comp_uicollection_concept.html

elems is the observable property that contains the collection of child UI components.

elems is the collection of the child elements of uiCollection. As far as elems is the observable property, the templates of the components added to elems in the runtime, are also rendered