¿Qué significan "fuente" y "dataScope" en el archivo de configuración del componente Ui del formulario de administrador

Hay nodos de origen y dataScope en la configuración del componente de interfaz de usuario del formulario de administración de Magento2. ¿Qué significan y cómo se supone que deben usarse?

<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>

Sobre el sourcenodo

El sourcevalor del nodo corresponde a una clave en la matriz de datos devuelta por el \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface::getDatamétodo de su componente UI.

Por ejemplo, consideremos la interfaz de usuario customer_form .
Archivo/Magento/Customer/view/base/ui_component/customer_form.xml

Desde aquí puede ver que para la mayoría de los campos, Magento usa el customervalor debajo del sourcenodo.
Pero espere, para los campos debajo del addressconjunto de campos, este valor ha cambiado a address.

Ahora echemos un vistazo al DataProvider correspondiente para el componente UI customer_form .
La clase es \Magento\Customer\Model\Customer\DataProvider.

Aproximadamente, el método getDatade esta clase es responsable de devolver los datos que se rellenan en los campos correspondientes declarados por el componente customer_form .
Como puede adivinar ahora, el valor del nodo del clientesource nos dice que usemos el valor almacenado bajo el cliente clave en el getDatamétodo, mientras que la dirección source apunta a los datos almacenados bajo la dirección clave en los datos devueltos.

Mirada más cercana: <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>

El campo anterior toma su valor de nombre de los datos almacenados bajo la clave del cliente devuelta por el proveedor de datos del cliente .

Mientras que en el siguiente caso, la fuente del valor de nombre son los datos almacenados bajo la dirección clave : <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>

Sobre el dataScopenodo

El dataScopenodo le permite cambiar un valor para el atributo de nombre de su entrada (campo), por ejemplo, <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> la entrada del resultado se representará de la siguiente manera:<input name="field_name"...>

También puede escribir los valores en el dataScopenodo separados por puntos: customer.address.firstnameen este caso, la entrada del resultado se representa de la siguiente manera: <input name="customer[address][firstname]"...> Aquí es donde ocurre la magia .

Además, el dataScopenodo cambia la ruta del valor recuperado para un campo. Esto se logra mediante la técnica de enlace .

Esto significa que su campo se enviará en POST como su valor "dataScope", en su situación, por ejemplo, la solicitud posterior será como ['title'] => var