ম্যাজেন্টো 2: `getTemplate` নকআউট ফাংশন বাউন্ড কীভাবে / কোথায়?

অনেক Magento ব্যাকএন্ড পৃষ্ঠাগুলিতে তাদের উত্স কোডে নিম্নলিখিতটি থাকে

<!-- ko template: getTemplate() --><!-- /ko -->

আমি বুঝতে পারি (বা আমি মনে করি?) এটি <!-- ko templateএকটি নকআউটজেএস কন্টেইনার-কম টেম্পলেট বাঁধাই ।

আমার কাছে যা পরিষ্কার নয় তা হল - getTemplate()ফাংশনটি কোন প্রসঙ্গে বলা হয়? আমি অনলাইনে দেখেছি যে উদাহরণগুলিতে, এর পরে সাধারণত একটি জাভাস্ক্রিপ্ট অবজেক্ট থাকে template:। আমি ধরে নিচ্ছি যে getTemplateএটি একটি জাভাস্ক্রিপ্ট ফাংশন যা কোনও বস্তুকে রিটার্ন করে - তবে কোনও বিশ্বব্যাপী জাভাস্ক্রিপ্ট ফাংশন নামকরণ করা হয়নি getTemplate।

getTemplateবাঁধা কোথায় ? অথবা, সম্ভবত আরও ভাল প্রশ্ন, নকেনআউটজেএস অ্যাপ্লিকেশন বাধ্যবাধকতা কোন ম্যাজেন্টো ব্যাকএন্ড পৃষ্ঠায় ঘটবে?

আমি খাঁটি এইচটিএমএল / সিএসএস / জাভাস্ক্রিপ্ট দৃষ্টিকোণ থেকে এটিতে আগ্রহী। আমি জানি ম্যাজেন্টো 2 এর অনেকগুলি কনফিগারেশন বিমূর্ততা রয়েছে (তত্ত্ব অনুসারে) বিকাশকারীদের বাস্তবায়নের বিশদ সম্পর্কে চিন্তা করার দরকার নেই। আমি বাস্তবায়ন বিশদ আগ্রহী।

magento2 knockoutjs

— অ্যালান ঝড়
সূত্র

কোনও ইউআই উপাদানগুলির জন্য পিএইচপি কোড জাভাস্ক্রিপ্টের সূচনা করে যা দেখে মনে হয়

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app":{
                "types":{...},
                "components":{...},
            }
        }
    }
</script>

পৃষ্ঠায় Magento_Ui/js/core/appকোডটির এই বিটটির অর্থ ম্যাজেন্টো একটি কলব্যাক আনার জন্য প্রয়োজনীয় জেএস মডিউলটি আহ্বান করবে , এবং তারপরে সেই কলব্যাকটি {types:..., components:...}JSON অবজেক্টে আর্গুমেন্ট হিসাবে ( dataনীচে) পাস করছে বলে কল করবে

#File: vendor/magento/module-ui/view/base/web/js/core/app.js
define([
    './renderer/types',
    './renderer/layout',
    'Magento_Ui/js/lib/ko/initialize'
], function (types, layout) {
    'use strict';

    return function (data) {
        types.set(data.types);
        layout(data.components);
    };
});

ডেটা অবজেক্টে ইউআই উপাদান রেন্ডার করার জন্য প্রয়োজনীয় সমস্ত ডেটা , পাশাপাশি একটি কনফিগারেশন রয়েছে যা কিছু নির্দিষ্ট স্ট্রিংগুলিকে কিছু নির্দিষ্ট ম্যাজেন্টো রাইওয়ারজেএস মডিউলগুলির সাথে সংযুক্ত করে। typesও layoutম্যাপিংটি প্রয়োজনীয় জেএস মডিউলগুলিতে ঘটে । অ্যাপ্লিকেশনটিও প্রয়োজনীয় Magento_Ui/js/lib/ko/initializeজেএস লাইব্রেরি লোড করে । initializeমডিউল কিক Magento এর KnockoutJS ইন্টিগ্রেশন বন্ধ।

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/** Loads all available knockout bindings, sets custom template engine, initializes knockout on page */

#File: vendor/magento/module-ui/view/base/web/js/lib/ko/initialize.js
define([
    'ko',
    './template/engine',
    'knockoutjs/knockout-repeat',
    'knockoutjs/knockout-fast-foreach',
    'knockoutjs/knockout-es5',
    './bind/scope',
    './bind/staticChecked',
    './bind/datepicker',
    './bind/outer_click',
    './bind/keyboard',
    './bind/optgroup',
    './bind/fadeVisible',
    './bind/mage-init',
    './bind/after-render',
    './bind/i18n',
    './bind/collapsible',
    './bind/autoselect',
    './extender/observable_array',
    './extender/bound-nodes'
], function (ko, templateEngine) {
    'use strict';

    ko.setTemplateEngine(templateEngine);
    ko.applyBindings();
});

প্রতিটি স্বতন্ত্র প্রয়োজনীয় bind/...জেএস মডিউল নকআউটের জন্য একটি একক কাস্টম বাঁধাই সেট আপ করে ।

প্রয়োজনীয় extender/...জেএস মডিউলগুলি নোকআউটজেএস আইটেমগুলিতে কিছু সহায়ক পদ্ধতি যুক্ত করে।

ম্যাজেন্টো ./template/engineনোকআউটের জাভাস্ক্রিপ্ট টেম্পলেট ইঞ্জিনের প্রয়োজনীয়তা জেএস মডিউলে কার্যকারিতাও প্রসারিত করে ।

অবশেষে, ম্যাজেন্টো applyBindings()নকআউটজেএস অবজেক্টে কল করে। এটি সাধারণত যেখানে নকআউট প্রোগ্রাম কোনও ভিউ মডেলকে এইচটিএমএল পৃষ্ঠায় আবদ্ধ করে - তবে, ম্যাজেন্টো কোনও ভিউ মডেল applyBindings ছাড়াই কল করে । এর অর্থ নকআউট পৃষ্ঠা হিসাবে দেখা হিসাবে প্রক্রিয়া করা শুরু করবে, তবে কোনও ডেটা সীমাবদ্ধ নেই।

স্টক নকআউট সেটআপে, এটি কিছুটা মূর্খ হবে। তবে পূর্বে উল্লিখিত কাস্টম নকআউট বাঁধনের কারণে নকআউটকে কাজ করার প্রচুর সুযোগ রয়েছে।

আমরা স্কোপ বাইন্ডিংয়ে আগ্রহী । আপনি এই এইচটিএমএলে দেখতে পাচ্ছেন যে পিএইচপি ইউআই কম্পোনেন্ট সিস্টেমটিও রেন্ডার করেছে।

<div class="admin__data-grid-outer-wrap" data-bind="scope: 'customer_listing.customer_listing'">
    <div data-role="spinner" data-component="customer_listing.customer_listing.customer_columns" class="admin__data-grid-loading-mask">
        <div class="spinner">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    </script>
</div>

বিশেষত, data-bind="scope: 'customer_listing.customer_listing'">গুণাবলী। যখন ম্যাজেন্টো কিকস শুরু applyBindingsকরবে, নকআউট এই কাস্টম scopeবন্ধনটি দেখতে পাবে এবং প্রয়োজনীয় ./bind/scopeজেএস মডিউলটি শুরু করবে। একটি কাস্টম বাঁধাই প্রয়োগ করার ক্ষমতা খাঁটি নকআউটজেএস। বাস্তবায়ন সুযোগ বাঁধাই কিছু Magento ইনক সম্পন্ন করেছে।

স্কোপ বাইন্ডিংয়ের বাস্তবায়ন রয়েছে

#File: vendor/magento/module-ui/view/base/web/js/lib/ko/bind/scope.js

এই ফাইলটির গুরুত্বপূর্ণ বিটটি এখানে

var component = valueAccessor(),
    apply = applyComponents.bind(this, el, bindingContext);

if (typeof component === 'string') {
    registry.get(component, apply);
} else if (typeof component === 'function') {
    component(apply);
}

বিশদে না গিয়ে, registry.getপদ্ধতিটি componentসনাক্তকারী হিসাবে ভেরিয়েবলের স্ট্রিংটি ব্যবহার করে একটি ইতিমধ্যে উত্পন্ন বস্তুটি টেনে আনবে applyComponentsএবং তৃতীয় প্যারামিটার হিসাবে পদ্ধতিতে এটি পাস করবে । স্ট্রিং আইডেন্টিফায়ারটি scope:( customer_listing.customer_listingউপরে) এর মান

ভিতরে applyComponents

function applyComponents(el, bindingContext, component) {
    component = bindingContext.createChildContext(component);

    ko.utils.extend(component, {
        $t: i18n
    });

    ko.utils.arrayForEach(el.childNodes, ko.cleanNode);

    ko.applyBindingsToDescendants(component, el);
}

কলে createChildContextতৈরি করবে কি, মূলত, একটি নতুন viewModel ইতিমধ্যে instantiated কম্পোনেন্ট অবজেক্ট উপর ভিত্তি করে বস্তু, এবং তারপর সব এটি প্রযোজ্য মূল বংশধর উপাদান divব্যবহার data-bind=scope:।

সুতরাং, ইতিমধ্যে তাত্ক্ষণিক উপাদান অবজেক্টটি কী? layoutফিরে কল কল মনে আছে app.js?

#File: vendor/magento/module-ui/view/base/web/js/core/app.js

layout(data.components);

layoutফাংশন / মডিউল পাস মধ্যে নামা হবে data.components(আবার, এই তথ্য বস্তুর মাধ্যমে পাস থেকে আসে text/x-magento-init)। এটি যে প্রতিটি বস্তুর সন্ধান করে এটির জন্য এটি কোনও configবস্তুর সন্ধান করবে এবং সেই কনফিগারেশন বস্তুতে এটি কোনও componentকী সন্ধান করবে । যদি এটি কোনও উপাদান কী খুঁজে পায় তবে তা হবে

RequireJSএকটি মডিউল উদাহরণ ফেরত দিতে ব্যবহার করুন - যেমন মডিউলটি একটি requirejs/ defineনির্ভরতার মধ্যে ডাকা হয়েছিল ।
জাভাস্ক্রিপ্ট নির্মাতা হিসাবে সেই মডিউল উদাহরণটি কল করুন
ফলস্বরূপ অবজেক্টটি registryবস্তু / মডিউলে সংরক্ষণ করুন

সুতরাং, এটি গ্রহণ করার জন্য অনেক কিছুই using ব্যবহার করে এখানে একটি দ্রুত পর্যালোচনা দেওয়া হল

<div class="admin__data-grid-outer-wrap" data-bind="scope: 'customer_listing.customer_listing'">
    <div data-role="spinner" data-component="customer_listing.customer_listing.customer_columns" class="admin__data-grid-loading-mask">
        <div class="spinner">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    </script>
</div>

একটি সূচনা পয়েন্ট হিসাবে। scopeমান customer_listing.customer_listing।

আমরা যদি JSON অবজেক্টটি text/x-magento-initআরম্ভ থেকে দেখি

{
    "*": {
        "Magento_Ui/js/core/app": {
            /* snip */
            "components": {
                "customer_listing": {
                    "children": {
                        "customer_listing": {
                            "type": "customer_listing",
                            "name": "customer_listing",
                            "children": /* snip */
                            "config": {
                                "component": "uiComponent"
                            }
                        },
                        /* snip */
                    }
                }
            }
        }
    }
}

আমরা দেখি components.customer_listing.customer_listingবস্তুর টি configবস্তু, এবং যে কনফিগ বস্তুর টি componentবস্তু যে সেট uiComponent। uiComponentস্ট্রিং একটি RequireJS মডিউল। আসলে, এটির একটি আবশ্যকজেএস ওরফে যা Magento_Ui/js/lib/core/collectionমডিউলটির সাথে সম্পর্কিত।

vendor/magento/module-ui/view/base/requirejs-config.js
14:            uiComponent:    'Magento_Ui/js/lib/core/collection',

ইন layout.js, ম্যাজেন্টোতে নিম্নলিখিত কোডের সমান কোড রয়েছে।

//The actual code is a bit more complicated because it
//involves jQuery's promises. This is already a complicated 
//enough explanation without heading down that path

require(['Magento_Ui/js/lib/core/collection'], function (collection) {    
    object = new collection({/*data from x-magento-init*/})
}

সত্যিই কৌতূহলের জন্য, আপনি যদি সংগ্রহের মডেলটি একবার দেখে থাকেন এবং এর কার্যকরকরণের পথটি অনুসরণ করেন তবে আপনি আবিষ্কার করতে পারবেন collectionএটি একটি জাভাস্ক্রিপ্ট অবজেক্ট যা lib/core/element/elementমডিউল এবং মডিউল উভয় দ্বারা বর্ধিত হয়েছে lib/core/class। এই কাস্টমাইজেশন গবেষণা এই উত্তরের সুযোগ বাইরে।

একবার তাত্ক্ষণিকভাবে এটি রেজিস্ট্রি এ layout.jsসঞ্চয় করুন object। এর অর্থ যখন নকআউট বাইন্ডিংগুলি প্রক্রিয়াকরণ শুরু করে এবং কাস্টম scopeবাঁধার সম্মুখীন হয়

<div class="admin__data-grid-outer-wrap" data-bind="scope: 'customer_listing.customer_listing'">
    <!-- snip -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- snip -->
</div>

ম্যাজেন্টো এই বিষয়টিকে রেজিস্ট্রি থেকে ফিরিয়ে আনবে এবং এটিকে ভিতরে থাকা জিনিসগুলির জন্য দর্শন মডেল হিসাবে আবদ্ধ করবে div। অন্য কথায়, getTemplateনকআউট যখন ট্যাগহীন বাঁধাইয়ের ডাক দেয় তখন সেই getTemplateপদ্ধতিটি হ'ল new collectionবস্তুটির সেই পদ্ধতি ।

— অ্যালান ঝড়
সূত্র

আমি আপনার উত্তরটির 'কেন' প্রশ্নটি জিজ্ঞাসা করতে ঘৃণা করি, তাই আরও কেন্দ্রীভূত প্রশ্নটি হবে, কে 2 টেমপ্লেটগুলিতে কল করার জন্য এই (আপাতদৃষ্টিতে সংশ্লেষিত) সিস্টেমটি ব্যবহার করে এম 2 কী লাভ করবে?

— সার্কেলিক্স

@ সার্কেলিক্সিক্স <uiComponents/>লেআউট এক্সএমএল সিস্টেম থেকে রেন্ডারিংয়ের জন্য এটি একটি বৃহত সিস্টেমের অংশ । তারা প্রাপ্ত বেনিফিটগুলি হ'ল একই পৃষ্ঠায় ভিন্ন ভিন্ন ট্যাগগুলির জন্য ভিউ মডেলগুলি অদলবদল করার ক্ষমতা।

— অ্যালান ঝড়

আমি হাসি না কাঁদতে জানি না! কী এলোমেলো.

— Koosa

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

— মারিওন জেকে ইডাজ

এই সমস্ত "যাদু" দ্বারা রেন্ডার করা কোনও ফর্মের সাথে কাস্টম আচরণকে কীভাবে বাঁধতে হয় তা আবিষ্কার করার চেষ্টা করার জন্য আমি কেবল প্রায় 5 ঘন্টা ব্যয় করি। সমস্যার একটি অংশ হ'ল এই অত্যন্ত জেনেরিক কাঠামোর জন্য আপনাকে কীভাবে কীভাবে কীভাবে কাজ করতে হয় তা বোঝার সুযোগ না পাওয়া পর্যন্ত আপনাকে এক টন স্তর দিয়ে যাওয়ার প্রয়োজন। একটি নির্দিষ্ট কনফিগারেশন কোথা থেকে আসছে তা ট্র্যাক করা অবিশ্বাস্যরকম ক্লান্তিকর হয়ে ওঠে।

— গ্রীনোন 83

নকআউট জেএস টেম্পলেটগুলির যে কোনওটির জন্য বাইন্ডিং মডিউলটির .xML ফাইলগুলিতে ঘটে। উদাহরণস্বরূপ চেকআউট মডিউলটি ব্যবহার করে আপনি contentটেমপ্লেটের জন্য কনফিগারেশনটি খুঁজে পেতে পারেনvendor/magento/module-checkout/view/frontend/layout/default.xml

<block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart" as="minicart" after="logo" template="cart/minicart.phtml">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="types" xsi:type="array"/>
                <item name="components" xsi:type="array">
                    <item name="minicart_content" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
                            </item>

এই ফাইলটিতে আপনি দেখতে পাচ্ছেন যে ব্লক শ্রেণিতে নোড রয়েছে যা "jsLayout" সংজ্ঞায়িত করে এবং কলটি আউট করে <item name="minicart_content" xsi:type="array">। এটি কিছুটা যুক্তিযুক্ত রাউন্ড রবিন, তবে আপনি যদি থাকেন তবে আপনি vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtmlএই লাইনটি দেখতে পাবেন:

<div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

সুতরাং ডেটা-বেঁধে নির্দেশ যেখানে এই ক্ষেত্রে কোনো নেস্টেড টেমপ্লেটের জন্য দেখুন, এটা Magento_Checkout/js/view/minicartএর vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jsযুক্তিবিজ্ঞান জন্য (অথবা নকআউট মডেল দেখুন-দেখুন মডেল সিস্টেমের মধ্যে এমভি) এবং আপনি Magento_Checkout/minicart/content(অথবা নকআউট মডেল দেখুন-দেখুন মডেল মধ্যে V টেম্পলেট কল জন্য সিস্টেম)। সুতরাং এই স্পটে টেমপ্লেটটি টানা হচ্ছে vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html।

সত্যিই একবার আপনি .xml এর সন্ধান করার জন্য অভ্যস্ত হয়ে উঠা ঠিক করা কঠিন নয়। আপনি যদি ভাঙা ইংরেজির পথ পেরিয়ে যেতে পারেন তবে বেশিরভাগটি আমি এখানে শিখেছি । তবে এখনও পর্যন্ত আমার কাছে মনে হচ্ছে নকআউট ইন্টিগ্রেশন এম 2 এর ন্যূনতম নথিভুক্ত অংশ।

— circlesix
সূত্র

দরকারী তথ্য, সুতরাং +1, কিন্তু প্রশ্ন অনুযায়ী, আমি জানি যে এটি মোকাবেলায় ম্যাজেন্টোর বিমূর্ততা রয়েছে - তবে আমি নিজেই প্রয়োগের বিবরণ সম্পর্কে আগ্রহী। যেমন - আপনি যখন এই এক্সএমএল ফাইলে কোনও কনফিগারেশন করেন তখন আপনার কনফিগার করা মানগুলি তৃতীয় কোনও কাজ করে তা নিশ্চিত করার জন্য ম্যাজেন্টো অন্য কিছু করে । আমি অন্য কিছু এবং তৃতীয় জিনিস আগ্রহী।

— অ্যালান ঝড়