Magento 2: Javascript ausführen / ausführen, nachdem KnockoutJS alle Elemente gerendert hat

Ich versuche, benutzerdefinierten Javascript-Code auszuführen, nachdem die Seite vollständig mit allen Formularelementen / Feldern geladen wurde.

Ich probiere das an, Magento2 Adminwährend adding new product.

Zum Beispiel:

Ich versuche, das QuantityFeld auf der New ProductSeite zum Hinzufügen in Magento2 Admin zu deaktivieren .

Der Seiteninhalt wird durch gerendert KnockoutJS. Die folgenden jQuery on loadfunktionieren also nicht:

jQuery(window).bind("load", function() { 
    // your code
});

// OR

jQuery(window).on('load', function() {
    // your code
});

Wie führe ich Javascript-Code in Magento 2 aus, nachdem KnockoutJS das Rendern aller DOM-Elemente abgeschlossen hat?

Da Magento asynchrones Rendern verwendet, ist es nicht möglich, das zu erstellen, was Sie verlangen.

Sie können jedoch mit der js-UI-Komponente arbeiten, um das Feld zu deaktivieren

require(['uiRegistry'], function (uiRegistry) {
    uiRegistry.get("product_form.product_form.product-details.quantity_and_stock_status_qty.qty", function (element) {
        element.disable()
    })
})

Diese Antwort ist richtig, es fehlen jedoch Informationen darüber, wie wir 'product_form.product_form.product-details.quanityt_and_stock_status_qty.qty' als get () -Parameter verwenden können.

.get sucht nach seinem ersten Parameter als Komponente. Also ... wie finden Sie die Komponente und ist diese Sprache klar? Nein.

Als Beispiel wollte ich der Kundeninformationsseite im Magento 2-Administrator einige benutzerdefinierte Javascript-Funktionen hinzufügen. Insbesondere unter Bearbeiten eines Benutzers auf der Registerkarte "Kontoinformationen".

Es gibt zwei Möglichkeiten, dies zu erreichen, soweit ich das beurteilen kann ...

Bearbeiten Sie die Datenquelle, um Werte zu ändern. Bearbeiten Sie das Feld, z. B. die Sichtbarkeit.

Bearbeiten Sie die Datenquelle:

Lass uns loslegen. Einige Punkte fehlen hier, aber wir befinden uns auf einer Seite, die vom Magento-Kundenmodul verwaltet wird. Es handelt sich um eine Bearbeitungsseite. Wir sehen uns diese hier an. /Vendor/module-customer/view/adminhtml/layout/customer_index_edit.xml . Innerhalb dieses Bereichs wird der Inhaltsbereich so definiert, dass er 'customer_form' enthält.

<referenceContainer name="content">
    <uiComponent name="customer_form"/>
</referenceContainer>

Dies bedeutet, dass wir nach einer Datei 'customer_form.xml' suchen. In diesem Fall befindet sie sich unter /vendor/module-customer/view/base/ui_component/customer_form.xml. Hier finden wir die Definition für einige der Formulare innerhalb der Registerkarten und ihrer Felder. Die Datenquelle, nach der wir suchen, wird oben definiert.

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">customer_form.customer_form_data_source</item>
    </item>
    <item name="label" xsi:type="string" translate="true">Customer Information</item>
    <item name="reverseMetadataMerge" xsi:type="boolean">true</item>
</argument>

Beachten Sie den 'Anbieter' von 'customer_form.customer_form_data_source'. Hier sind alle unsere Felddaten innerhalb des .get-Aufrufs vorhanden.

Unsere .get () würde jetzt werden:

uiRegistry.get('customer_form.customer_form_data_source', function(element) {
    console.log(element.data);
});

Nun stellt sich die Frage ... was können wir damit machen - und alles, was Sie tun können, ist die Daten anzupassen. Sie können Felder auf true / false setzen, Werte bearbeiten usw. Nützlich.

Manipuliere das Feld:

Was ist, wenn wir das Feld ausblenden und nur unter x-Bedingungen anzeigen möchten? Das können wir mit der Datenquelle nicht tun.

Nun ... das wird lange dauern und verworren erscheinen. Das liegt daran, dass ich unterrichte, wie Sie Ihre Daten finden ... da ich nicht weiß, wie Sie dies auf andere Weise finden können - und es wird je nach Modul anders sein. Bringe einem Mann das Fischen bei.

Zuerst gebe ich meine 'customer_form.customer_form_data_source' in unserer .get () aus. Dadurch erhalten wir einen Objektschlüssel 'params', in dem die Definition einer 'activeArea' für das Objekt 'customer_form.areas.customer_edit_tab_view_content' enthalten ist.

Ok ... also gibt es "Bereiche". Bereiche sind die Registerkarten auf der linken Seite - jeder ist ein Bereich. Öffnen Sie die '_elems' in Ihrer Konsole. Oben sehen Sie 9 Objekte. Öffnen Sie die zweite und Sie finden eine Beschriftung mit "Kontoinformationen". Dies ist der Abschnitt, nach dem ich suche. Beobachten Sie dann den 'name'-Wert von' customer_form.areas.customer '... ok, versuchen wir das als unseren get () -Parameter.

uiRegistry.get('customer_form.areas.customer', function(element) {
    console.log(element);
});

Dies ist unser Fieldset-Wrapper. Überprüfen Sie den Namenswert in der Konsole unter '_elems' -> 0 -> 'name'. 'customer_form.areas.customer.customer' ... wir führen einen Drilldown durch. Wir sind tatsächlich schon da. Überprüfen Sie den Wert für 'name' in dem Feld, das Sie bearbeiten möchten. Sie werden feststellen, dass der Name "Kunde [Feldname]" lautet. Unser Pfad für get () lautet 'customer_form.areas.customer.customer. [' Field_name] '.

uiRegistry.get('customer_form.areas.customer.customer.[field_name]', function(element) {
    element.visible(false);
});

Beispiele: [form_name]. [Tab_areas]. [Area_name]. [Fieldset_name]. [Field_name] customer_form.areas.customer.customer.field_name

In Require JS ist ein Plugin integriert, um das Laden von Seiten zu handhaben. Dies ist die bevorzugte Methode, da alle anderen Module, die von Ihrem abhängen, auch die Anforderungen zum Laden von Seiten kennen. Wenn Sie die von Rajeev erwähnte jQuery-Methode verwenden, kennen die anderen Module die Anforderung zum Laden von Seiten nicht.

Das Plugin heißt domReady! und kann verwendet werden, indem es wie folgt als Abhängigkeit hinzugefügt wird:

require(["jquery", "domReady!"], function($){
    // Your code here
});

Dies wartet auf das Laden der Seite, bedeutet jedoch nicht unbedingt, dass es nach allen anderen KO-Modulen geladen wird, da diese möglicherweise auch auf das Laden der Seite warten. Aus diesem Grund denke ich, dass KAndys Methode die zuverlässigste ist, aber diese Antwort kann anderen helfen.

Die Ereignisse "Dokument bereit" oder "DOM geladen" werden nach Abschluss des Ladens des UI-Formulars nicht ausgelöst.

Hier müssen Sie entweder eine Funktion in Javascript schreiben, die in einem bestimmten Intervall aufgerufen werden sollte. Sobald Ihr Zielelement in DOM angezeigt wird, verarbeiten Sie Ihre Geschäftslogik und löschen Sie das Intervall.

Eine andere Möglichkeit könnte sein, Ihre JavaScript-Geschäftslogik nach Abschluss der AJAX-Anforderung auszuführen, was mit dem folgenden Codeblock erreicht werden kann.

$(document).ajaxComplete(function() {
// enter your code here
});

Sie können so etwas versuchen.

<script type="text/javascript">
require(["jquery"], function($){
    $(function() {

        //do your stuff here

    });
});
</script>

Dadurch wird sichergestellt, dass Ihr Code erst ausgeführt wird, nachdem dom vollständig geladen wurde. Wenn Sie mit jquery vertraut sind, werden Sie wahrscheinlich wissen, was zu tun ist $(function() {});. Es stellt sicher, dass Code eingeht, dass die anonyme Funktion erst ausgeführt wird, nachdem DOM vollständig geladen wurde.