เกี่ยวกับ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
โหนด
แต่รอสำหรับเขตข้อมูลภายใต้address
fieldset 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
โหนดเปลี่ยนเส้นทางของค่าที่ดึงมาสำหรับเขตข้อมูล นี่คือความสำเร็จโดยใช้เทคนิคการเชื่อมโยง