ম্যাজেন্টো 2: একটি each <প্রতিটি /> `ট্যাগ কি?

Question

আমি যতটুকু বলতে পারি, আপনি যখন ম্যাজেন্টোর ব্যাকএন্ডে একটি গ্রিড দেখেন, নিম্নলিখিত "এক্সএইচআর ওভার" নাকআউটজেএস টেম্পলেটটি যা জিনিসগুলি রেন্ডারিং শুরু করে what

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/>। তারা স্টক নকআউটজেএস-এর একটি অংশ নয় (না বলে মনে হচ্ছে না?)

আমি উপাদানগুলির মাধ্যমে নকআউটজেএস-এ কাস্টম ট্যাগ যুক্ত করা সম্ভব জানি তবে আমি কোনও স্পষ্ট জায়গা দেখতে পাচ্ছি না যেখানে কোনও উপাদান নাম দেওয়া হয়েছে eachবা renderনকআউটজেএস-এ যুক্ত করা হয়েছে।

সুতরাং, আমি নিশ্চিত নই যে এগুলি কোথাও নিবন্ধিত রয়েছে যা সম্পর্কে আমি অবগত নই, বা ম্যাজেন্টো নকআউটজেএসকে কাস্টম ট্যাগগুলি বা অন্য কিছুকে পুরোপুরি সক্ষম করে তোলে এমন কিছু কাস্টমাইজেশন তৈরি করেছে।

দ্রষ্টব্য: আমি এখানে পুরোপুরি অন্ধকারে নেই - আমি পেয়েছি যে <each/>সম্ভবত জেএসএএন-তে প্রতিটি শিশু ইউআই উপাদান রেন্ডার করা হয়েছে এবং এর টেমপ্লেটটি সরবরাহ করছে (যদি সেই টেমপ্লেটটি বিদ্যমান থাকে)।

আমি যা কিছুতেই পরিষ্কার করছি না তা হ'ল এই ট্যাগগুলি কীভাবে প্রয়োগ করা হয়। আমি দেখতে চাই যে সেগুলি কোথায় বাস্তবায়িত হয়েছে তাই আমি কীভাবে ডেটা সীমাবদ্ধ তা ডিবাগ করতে পারি এবং ম্যাগেন্টো অন্য যেসব ক্ষেত্রে এই ট্যাগগুলি তৈরি করতে ব্যবহার করে তাও বুঝতে পারি।

Answer 1

রাফেল যেমন ইঙ্গিত করেছিল, তখন দেখা যাচ্ছে যে ম্যাজেন্টো যখন এক্সএইচআর (অর্থাত্ আজাক্স) অনুরোধের মাধ্যমে তার নকআউটজেএস টেম্পলেটগুলি ডাউনলোড করে, তখন এটি কিছু কাস্টম পার্সিং রুটিনগুলির মধ্য দিয়ে যায় যা বিভিন্ন সংখ্যক কাস্টম ট্যাগ এবং বৈশিষ্ট্যগুলির সন্ধান করে

এই কাস্টম 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="...">) যুক্ত করবে ।

কি মনে হচ্ছে মৌলিক ধারণা এই ট্যাগ অনুবাদ করতে হয় এবং নেটিভ নকআউট "Tagless" টেমপ্লেট ব্লক মধ্যে বৈশিষ্ট্যাবলী। উদাহরণস্বরূপ, নিম্নলিখিত ম্যাজেন্টো নকআউটজেএস টেম্পলেট

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

নিম্নলিখিত নেটিভ নকআউটজেএস কোডে অনুবাদ করে

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

এই অনুবাদটির সঠিক নিয়মগুলি এখনও আমার কাছে অস্পষ্ট - এ কোডটি Magento_Ui/js/lib/knockout/template/rendererকিছুটা অপ্রত্যক্ষ, এবং দেখে মনে হচ্ছে তারা ট্যাগ থেকে ট্যাগ, অ্যাট্রিবিউটকে অ্যাট্রিবিউট করতে পারেন।

আমি নিম্নলিখিত কোড স্নিপেট জিন করেছি যা একটি ম্যাজেন্টো নাকআউটজেএস টেমপ্লেট ডাউনলোড করতে এবং এটিকে স্থানীয় নকআউটজেএস কোডে অনুবাদ করতে পারে।

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