Magento 2: แท็ก '<<แต่ละ /> `คืออะไร

ใกล้ที่สุดเท่าที่ฉันสามารถบอกได้เมื่อคุณดูกริดในแบ็กเอนด์ของวีโอไอพีเทมเพลต KnockoutJS "โหลดผ่าน XHR" ต่อไปนี้คือสิ่งที่เริ่มแสดงผลสิ่งต่าง ๆ

File: vendor/magento//module-ui/view/base/web/templates/collection.html
URL:  http://magento.example.xom/pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/collection.html
<each args="data: elems, as: 'element'">
    <render if="hasTemplate()"/>
</each>

อย่างไรก็ตาม - ฉันรู้สึกว่า<each/>แท็กและ<render/>แท็กคืออะไร พวกเขาไม่ได้เป็นหรือไม่เป็นส่วนหนึ่งของสต็อก KnockoutJS

ฉันรู้ว่าเป็นไปได้ที่จะเพิ่มแท็กที่กำหนดเองไปที่ KnockoutJS ผ่านส่วนประกอบแต่ฉันไม่เห็นสถานที่ใด ๆ ที่ชัดเจนซึ่งมีชื่อองค์ประกอบeachหรือrenderถูกเพิ่มลงใน KnockoutJS

ดังนั้นฉันไม่แน่ใจว่าสิ่งเหล่านี้เป็นส่วนประกอบที่ลงทะเบียนที่ไหนฉันไม่ทราบหรือการปรับแต่งอื่น ๆ ที่ Magento ได้ทำกับ KnockoutJS ที่เปิดใช้งานแท็กที่กำหนดเองหรืออย่างอื่น

หมายเหตุ:ฉันไม่ได้อยู่ในความมืดอย่างสมบูรณ์ที่นี่ - ฉันได้รับ<each/>มันอาจซ้ำแล้วซ้ำอีกทุกองค์ประกอบเด็ก UI ที่แสดงใน JSON และการแสดงผลแม่แบบของมัน (ถ้าแม่แบบที่มีอยู่)

สิ่งที่ฉันไม่ชัดเจนเลยคือการใช้งานแท็กเหล่านี้อย่างไร ฉันต้องการดูว่ามีการนำไปใช้ที่ใดฉันจึงสามารถดีบักวิธีการผูกข้อมูลและเข้าใจกลไกที่ Magento ใช้ในการสร้างแท็กเหล่านี้ในกรณีที่มีผู้อื่น

ดังที่ราฟาเอลบอกเป็นนัยว่าปรากฎว่าเมื่อวีโอไอพีดาวน์โหลดเทมเพลต KnockoutJS ผ่านทางคำขอ XHR (เช่นอาแจ็กซ์) มันก็จะส่งต่อพวกเขาผ่านขั้นตอนการแยกวิเคราะห์แบบกำหนดเองที่มองหาแท็กและแอตทริบิวต์ที่กำหนดเองจำนวนหนึ่ง

การแยกวิเคราะห์แบบกำหนดเองนี้ทำโดยMagento_Ui/js/lib/knockout/template/rendererโมดูล RequireJS ซอร์สโค้ดของโมดูลนี้ตั้งค่าแท็กและแอตทริบิวต์เริ่มต้นจำนวนหนึ่งเพื่อค้นหา นอกจากนี้ยังมีโมดูลอื่น ๆที่อาจเพิ่มแท็กและคุณลักษณะเพิ่มเติมให้กับตัวแสดงผลนี้ ตัวอย่างเช่นต่อไปนี้

#File: vendor/magento/module-ui/view/base/web/js/lib/knockout/bindings/scope.js
renderer
    .addNode('scope')
    .addAttribute('scope', {
        name: 'ko-scope'
    });

จะเพิ่ม<scope/>แท็กและscopeแอตทริบิวต์ ( <div scope="...">) ในรายการแอตทริบิวต์ที่แยกได้

คือดูเหมือนว่าแนวคิดพื้นฐานคือการแปลแท็กเหล่านี้และแอตทริบิวต์เข้าไปพื้นเมืองที่น่าพิศวง "Tagless" แม่บล็อก ตัวอย่างเช่นแม่แบบ Magento KnockoutJS ต่อไปนี้

<each args="data: elems, as: 'element'">
    <render if="hasTemplate()"/>
</each>

แปลเป็นรหัส KnockoutJS ต่อไปนี้

<!-- ko foreach: {data: elems, as: 'element'} -->
    <!-- ko if: hasTemplate() --><!-- ko template: getTemplate() --><!-- /ko --><!-- /ko -->
<!-- /ko -->

กฎที่แน่นอนของการแปลนี้ยังไม่ชัดเจนสำหรับฉัน - รหัสในMagento_Ui/js/lib/knockout/template/rendererนั้นเป็นทางอ้อมเล็กน้อยและดูเหมือนว่าพวกเขาสามารถเปลี่ยนจากแท็กหนึ่งเป็นแท็ก

ฉันได้อ่านตัวอย่างโค้ดต่อไปนี้ที่สามารถดาวน์โหลดเทมเพลต Magento KnockoutJS และแปลมันเป็นโค้ด KnockoutJS ดั้งเดิม

jQuery.get('http://magento-2-1-0.dev/static/adminhtml/Magento/backend/en_US/Magento_Ui/templates/collection.html', function(result){
    var renderer = requirejs('Magento_Ui/js/lib/knockout/template/renderer')
    var fragment = document.createDocumentFragment();
    $(fragment).append(result);

    //fragment is passed by reference, modified
    renderer.normalize(fragment);
    var string = new XMLSerializer().serializeToString(fragment);
    console.log(string);    
})

ว่าทำไมวีโอไอพีอาจทำเช่นนี้ - คาดเดาของฉันเป็นที่ต้องการการเรียงลำดับของการเน้นไวยากรณ์และการอ่านสำหรับ KnockoutJS ของการแสดงความคิดเห็นแม่แบบบาง แต่ไม่เคยออกกฎเหตุผล Mallory-ish มากขึ้น

แท็กทั้งสองมีการใช้งานภายใต้app/code/Magento/Ui/view/base/web/js/lib/knockout/template/renderer.jsฉันไม่แน่ใจเกินไปที่จะเข้าใจว่าพวกเขาจะใช้งานอย่างไร:

_.extend(preset.nodes, {
    foreach: {
        name: 'each'
    },

    /**
     * Custom 'render' node handler function.
     * Replaces node with knockout's 'ko template:' comment tag.
     *
     * @param {HTMLElement} node - Element to be processed.
     * @param {String} data - Data specified in 'args' attribute of a node.
     */
    render: function (node, data) {
        data = data || 'getTemplate()';
        data = renderer.wrapArgs(data);

        renderer.wrapNode(node, 'template', data);
        $(node).replaceWith(node.childNodes);
    }
});