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?
Best Answer
The only info I can find is
on line 321 of
It appears this is inside a function that merges components?
This is used on line 73 (run function) of the same file (layout.js) where it's used to merge nodes.
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