“ source” และ“ dataScope” หมายถึงอะไรในไฟล์ admin การกำหนดค่าองค์ประกอบ Ui

มีโหนดต้นทางและdataScopeในการกำหนดค่าองค์ประกอบ UI ของผู้ดูแลระบบ Magento2 พวกเขาหมายถึงอะไรและควรใช้อย่างไร?

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

เกี่ยวกับsourceโหนด

sourceโหนดสอดคล้องกับค่าคีย์ในอาร์เรย์ข้อมูลที่ส่งกลับโดย\Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface::getDataวิธีการขององค์ประกอบ UI ของคุณ

ตัวอย่างเช่นลองพิจารณาcustomer_form UI
ไฟล์/Magento/Customer/view/base/ui_component/customer_form.xml

จากที่นี่คุณจะเห็นว่าส่วนใหญ่ของเขตข้อมูลวีโอไอพีใช้customerค่าภายใต้sourceโหนด
แต่รอสำหรับเขตข้อมูลภายใต้addressfieldset addressค่านี้มีการเปลี่ยนแปลงไป

ทีนี้ลองมาดูสั้น ๆ ที่DataProvider ที่สอดคล้องกันสำหรับองค์ประกอบcustomer_form UI ชั้นคือ
\Magento\Customer\Model\Customer\DataProvider

โดยประมาณวิธีการgetDataของคลาสนี้รับผิดชอบการส่งคืนข้อมูลที่บรรจุในฟิลด์ที่สอดคล้องกันซึ่งประกาศโดยองค์ประกอบcustomer_form
ดังที่คุณสามารถเดาได้ตอนนี้มูลค่าลูกค้าของsourceโหนดบอกให้เราใช้ค่าที่เก็บไว้ภายใต้ลูกค้ารายสำคัญในgetDataวิธีการในขณะที่ที่อยู่ sourceชี้ไปยังข้อมูลที่เก็บไว้ภายใต้ที่อยู่หลักในข้อมูลที่ส่งคืน

ดูใกล้ชิด: <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>

ข้อมูลข้างต้นจะใช้เวลาคุ้มค่า FirstName จากข้อมูลที่เก็บไว้ภายใต้คีย์ลูกค้าส่งกลับโดยลูกค้าdataprovider

ในขณะที่ในกรณีด้านล่างแหล่งที่มาของค่าชื่อเป็นข้อมูลที่เก็บไว้ภายใต้ที่อยู่ที่สำคัญ: <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>

เกี่ยวกับdataScopeโหนด

dataScopeโหนดช่วยให้คุณสามารถเปลี่ยนค่าสำหรับชื่อแอตทริบิวต์ของการป้อนข้อมูลของคุณ (เขต) เช่น <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> ใส่ผลจะแสดงผลดังนี้<input name="field_name"...>

นอกจากนี้คุณยังสามารถเขียนค่าลงในdataScopeโหนดคั่นด้วยจุด: customer.address.firstnameในกรณีนี้การป้อนข้อมูลผลการแสดงผลดังต่อไปนี้: <input name="customer[address][firstname]"...> นี่เป็นที่ที่มหัศจรรย์ที่เกิดขึ้น

นอกจากนี้dataScopeโหนดเปลี่ยนเส้นทางของค่าที่ดึงมาสำหรับเขตข้อมูล นี่คือความสำเร็จโดยใช้เทคนิคการเชื่อมโยง

นี่หมายความว่าฟิลด์ของคุณจะถูกส่งใน POST เช่นค่า "dataScope" ของคุณในสถานการณ์ของคุณตัวอย่างเช่นคำขอโพสต์จะเป็นเช่นนั้น ['title'] => var