Magento 2: Was füllt "Elemente" in einer UI-Komponente

9

Die KnockoutJS-Vorlage der obersten Ebene zum Auflisten der UI-Komponente sieht folgendermaßen aus

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

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

Dies wird von Magento in den folgenden KnockoutJS-Rohcode übersetzt.

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

In beiden Fällen wird diese Vorlage foreachüber die elemsEigenschaft des Ansichtsmodells verschoben.

Wenn ich mir das RequireJS-Modul anschaue, das (glaube ich>) die Konstruktorklasse des Ansichtsmodells zurückgibt

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

Ich sehe, dass die insertChildMethode der elemsEigenschaft hinzugefügt zu werden scheint .

Was mir weniger klar ist, ist: Wo ruft Magento tatsächlich auf, um das insertChildzu füllen, elemsund / oder wie wird es elemsmit den Ansichtsmodellen gefüllt, aus denen eine Sammlung von UI-Komponenten besteht?

Alan Storm
quelle

Antworten:

2

Die einzige Information, die ich finden kann, ist

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

in Zeile 321 von

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

Es scheint, dass dies innerhalb einer Funktion ist, die Komponenten zusammenführt?

merge: function (components) {
   ...
}

Dies wird in Zeile 73 (Ausführungsfunktion) derselben Datei (layout.js) verwendet, in der Knoten zusammengeführt werden.

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));
}

Diese Ausführungsfunktionen werden in zwei Funktionen verwendet (verarbeiten und zusammenführen - beide in layout.js), aber ich kann nicht vollständig herausfinden, was sie tun.

Aktualisieren

Ich habe gerade Folgendes in den Entwicklungsdokumenten gesehen: http://devdocs.magento.com/guides/v2.1/ui_comp_guide/concepts/ui_comp_uicollection_concept.html

elems ist die beobachtbare Eigenschaft, die die Sammlung untergeordneter UI-Komponenten enthält.

elems ist die Sammlung der untergeordneten Elemente von uiCollection. Soweit elems die beobachtbare Eigenschaft ist, werden auch die Vorlagen der Komponenten gerendert, die zur Laufzeit zu elems hinzugefügt wurden

Ben Crook
quelle