Magento 2: क्या एक `<प्रत्येक />` टैग है?

Question

जैसा कि मैं बता सकता हूं कि जब आप मैगेंटो के बैकएंड में एक ग्रिड देखते हैं, तो निम्नलिखित "एक्सएचआर पर लोड" नॉकआउट जेएस टेम्पलेट है जो चीजों को प्रस्तुत करना शुरू करता है

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 में कस्टम टैग जोड़ना संभव है , लेकिन मुझे कोई भी स्पष्ट स्थान दिखाई नहीं देता है, जहां एक घटक का नाम eachया renderKnockoutJS जोड़ा गया है।

इसलिए, मुझे यकीन नहीं है कि ये घटक पंजीकृत हैं कहीं मुझे पता नहीं है, या कुछ अन्य अनुकूलन जो मैगनेटो ने नॉकआउट जेएस को बनाया है जो कस्टम टैग, या कुछ और पूरी तरह से सक्षम करता है।

नोट: मैं पूरी तरह से यहां अंधेरे में नहीं हूं - मुझे लगता है कि <each/>शायद JSON में प्रदान किए गए प्रत्येक बच्चे के ui घटक पर पुनरावृत्ति हो रही है, और इसका टेम्पलेट प्रदान कर रहा है (यदि वह टेम्पलेट मौजूद है)।

मैं बिल्कुल स्पष्ट नहीं हूं कि ये टैग कैसे लागू होते हैं। मैं देखना चाहता हूं कि वे कहां कार्यान्वित हुए हैं इसलिए मैं डिबग कर सकता हूं कि डेटा कैसे बाध्य है, और यह भी तंत्र को समझें कि मैगेंटो का उपयोग इन टैग को बनाने के लिए होता है अगर अन्य हैं।

Answer 1

जैसा कि राफेल ने संकेत दिया, यह पता चला है कि जब Magento XHR (यानी ajax) अनुरोध के माध्यम से अपने KnockoutJS टेम्प्लेट को डाउनलोड करता है, तो यह उन्हें कुछ कस्टम पार्सिंग रूटीन से भी गुजरता है जो कई कस्टम टैग और विशेषताओं की तलाश करते हैं

यह कस्टम पार्सिंग, Magento_Ui/js/lib/knockout/template/rendererआवश्यकताएँ मॉड्यूल द्वारा किया जाता है । इस मॉड्यूल का स्रोत कोड कई डिफ़ॉल्ट टैग और खोज करने के लिए विशेषता सेट करता है। अन्य मॉड्यूल भी हैं जो इस रेंडर में अतिरिक्त टैग और विशेषताओं को जोड़ सकते हैं। उदाहरण के लिए, निम्नलिखित

#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="...">parseable विशेषताओं की सूची के लिए)।

है लगता है मूल विचार इन टैग का अनुवाद करने में है और देशी नॉकआउट "tagless" टेम्पलेट ब्लॉक में जिम्मेदार बताते हैं। उदाहरण के लिए, निम्न Magento KnockoutJS टेम्पलेट

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

निम्नलिखित मूल नॉकआउटJS कोड में अनुवाद करता है

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

इस अनुवाद के सटीक नियम अभी भी मेरे लिए स्पष्ट नहीं हैं - कोड Magento_Ui/js/lib/knockout/template/rendererथोड़ा अप्रत्यक्ष है, और ऐसा लगता है जैसे वे टैग से टैग में, विशेषता के लिए बदल सकते हैं।

मैंने निम्नलिखित कोड स्निपेट को तैयार किया है, जो Magento के नॉचआउटJS टेम्प्लेट को डाउनलोड कर सकता है, और इसे देशी नॉकआउट जेएस कोड में अनुवाद कर सकता है।

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);    
})

मैगेंटो ऐसा क्यों कर सकता है - मेरा अनुमान है कि नॉकआउटजैस के कमेंटिंग टेम्प्लेट के लिए कुछ प्रकार के वाक्यविन्यास और पठनीयता चाहते हैं, लेकिन अधिक मैलोरी-ईश कारणों से कभी इनकार नहीं करते ।

Answer 2

दोनों टैग के तहत कार्यान्वित किया जाता है 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);
    }
});