Co oznaczają „source” i „dataScope” w formularzu administratora pliku konfiguracyjnego komponentu interfejsu użytkownika

Istnieją węzły source i dataScope w Administratorze Magento2 z konfiguracji komponentu interfejsu użytkownika. Co mają na myśli i jak mają być używane?

<field name="title">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Page Title</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="dataScope" xsi:type="string">title</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

W odniesieniu do sourcewęzła

Wartość sourcewęzła odpowiada kluczowi w tablicy danych zwróconej przez \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface::getDatametodę komponentu interfejsu użytkownika.

Rozważmy na przykład interfejs użytkownika customer_form .
Plik/Magento/Customer/view/base/ui_component/customer_form.xml

Stąd widać, że dla większości pól Magento używa customerwartości pod sourcewęzłem.
Ale poczekaj, dla pól w zestawie pól addresswartość ta zmieniła się na address.

Teraz rzućmy okiem na odpowiedniego DataProvider dla komponentu interfejsu użytkownika customer_form .
Klasa jest \Magento\Customer\Model\Customer\DataProvider.

Z grubsza metoda getDatatej klasy jest odpowiedzialna za zwracanie danych, które są wypełniane do odpowiednich pól zadeklarowanych przez komponent customer_form .
Jak można się teraz domyślać, wartość klientasource węzła mówi nam, abyśmy korzystali z wartości przechowywanej pod kluczowym klientem w getDatametodzie, podczas gdy adres source wskazuje dane przechowywane pod kluczowym adresem w zwróconych danych.

Bliższe spojrzenie: <field name="firstname" formElement="input"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> item name="source" xsi:type="string">customer</item> </item> </argument> </field>

Powyższe pole pobiera swoją wartość imienia z danych przechowywanych w kluczowym kliencie zwróconym przez DataProvider klienta .

Podczas gdy w poniższym przypadku źródłem wartości imienia są dane przechowywane pod adresem klucza : <field name="firstname" formElement="input"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="source" xsi:type="string">address</item> </item> </argument> </field>

W odniesieniu do dataScopewęzła

dataScopeWęzeł pozwala zmienić wartość dla nazwy atrybutu swojego wejścia (pola), np <field name="title"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">input</item <item name="dataScope" xsi:type="string">field_name</item> </item> </argument> </field> Wejście wynik będzie wyświetlana w następujący sposób:<input name="field_name"...>

Możesz również zapisać wartości w dataScopewęźle oddzielone kropkami: customer.address.firstnamew tym przypadku dane wejściowe są renderowane w następujący sposób: <input name="customer[address][firstname]"...> Oto, gdzie dzieje się magia .

Również dataScopewęzeł zmienia ścieżkę odzyskanej wartości dla pola. Osiąga się to za pomocą techniki łączenia .

oznacza to, że twoje pole zostanie wysłane w POST, tak jak twoja wartość „dataScope”, w twojej sytuacji na przykład post post będzie podobny ['title'] => var