কীভাবে ম্যাজেন্টো 2 নকআউটজেএস বাইন্ডিং প্রয়োগ করে

Question

নকআউটজেএস ডকুমেন্টেশনের খুব কর্সারি পড়ার জন্য, খুব বেসিক নকআউট দৃশ্যের সূচনাটি নীচের মত দেখাচ্ছে

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

উদাহরণস্বরূপ - আপনি একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করেন যার উদ্দেশ্য একটি অবজেক্ট কনস্ট্রাক্টর হিসাবে ব্যবহার করা হবে, এটি থেকে কোনও বস্তুকে তাত্ক্ষণিকভাবে তৈরি করুন এবং তারপরে সেই বস্তুটি ko.applyBindingsবিশ্বব্যাপী নকআউট অবজেক্টের পদ্ধতিতে পাস করুন ( ko)

তবে, ম্যাজেন্টো 2-এ, আপনি যদি গ্রিড ইউআই দিয়ে কোনও ব্যাকএন্ড পৃষ্ঠা লোড করেন তবে ম্যাজেন্টো প্রয়োজনীয় js/core/app.jsজেএস মডিউলটি আরম্ভ করবে

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
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);
    };
});

এই মডিউলটি ঘুরে, Magento_Ui/js/lib/ko/initializeমডিউলটি লোড করে , যা ম্যাগেন্তোর নকআউটজেএস-এর ব্যবহার আরম্ভ করার জন্য উপস্থিত হয়। যাইহোক, আপনি মডিউল আরম্ভ করার উত্স তাকান।

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

আপনি দেখতে Magento এর নামক ko.applyBindings();বস্তু একটি দৃশ্য বস্তু ছাড়া । এটি কোনও অর্থবোধ করে না এবং আমি নিশ্চিত নই যে এটি আমার নকআউট সম্পর্কে সীমাবদ্ধ বোঝা, বা ম্যাজেন্টো এখানে কাস্টম / অদ্ভুত কিছু করছে।

এখানেই কি ম্যাজেন্টো আসলে নকআউট বাঁধাই প্রয়োগ করে? নাকি তা অন্য কোথাও ঘটে? বা নাগআউট কোডটি আটকানো এবং অন্য কোথাও এটি প্রক্রিয়াজাত করার জন্য ম্যাজেন্টো কৌশলপূর্ণ কিছু করছে?

Answer 1

Magento_Ui/js/lib/ko/initializeগ্রন্থাগার যেখানে Magento তার নকআউট উদাহরণস্বরূপ সূচনা প্রকৃতপক্ষে, হয়। Magento নেই একটি ViewModel ধার্য যখন এটি বাইন্ডিং প্রযোজ্য।

অনুপস্থিত কী এখানে কাস্টম নকআউটজেএস বাইন্ডিং এর নাম scope।

যখন ম্যাজেন্টোর নাকআউট উদাহরণটি এর scope:মতো বাঁধাইয়ের মুখোমুখি হয়

<li class="greet welcome" data-bind="scope: 'customer'">
    <span data-bind="text: customer().fullname ? $t('Welcome, %1!').replace('%1', customer().fullname) : 'Default welcome msg!'"></span>
</li>

এটি সেই বাঁধার মান (নামযুক্ত customer) নেয় এবং এটি থেকে অভ্যন্তরীণ নোডগুলির জন্য ভিউমোডেল লোড করতে এবং প্রয়োগ করতে এটি ব্যবহার করে uiRegistry। আপনি কিছু সাধারণ নকআউটজেএস preডিবাগিংয়ের মাধ্যমে নির্দিষ্ট স্কোপের জন্য আবদ্ধ ডেটাটি ডিবাগ করতে পারেন

<div data-bind="scope: 'someScope'">
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>            
</div>

uiRegistryবস্তুর মত সরল অভিধান, বাস্তবায়িত হয় Magento_Ui/js/lib/registry/registryRequireJS মডিউল।

vendor/magento/module-ui/view/base/requirejs-config.js
17:            uiRegistry:     'Magento_Ui/js/lib/registry/registry',

জাভাস্ক্রিপ্টের বিটগুলির মতো দেখতে দেখতে নিবন্ধগুলিতে নিবন্ধ স্থাপন করা হয়

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer",
                    "extra_data_1":"some_value",
                    "more_extra":"some_other_value",
                }
            }
        }
    }
}
</script>

Magento_Ui/js/core/appমডিউলটিতে প্রোগ্রামটি componentsবস্তুটিতে পাসের কীটি পরীক্ষা করবে এবং প্রতিটি উপ-অবজেক্টের জন্য হবে

1. কী ( ) RequireJSথেকে নির্দিষ্ট মডিউল দ্বারা প্রত্যাবর্তিত বস্তুটি আনুনcomponentMagento_Customer/js/view/customer

2. একটি নতুন জাভাস্ক্রিপ্ট অবজেক্ট ইনস্ট্যান্ট করতে সেই বস্তুটি ব্যবহার করুন (নীচে দেখুন)

3. একই অবজেক্টে কোনও অতিরিক্ত ডেটা কী বরাদ্দ করুন

4. uiRegistryমূল বস্তুর ( customerউপরে) কী দিয়ে একই বস্তুকে যুক্ত করুন

x-magento-initস্ক্রিপ্টটি কীভাবে কাজ করে তা আপনি যদি নিশ্চিত না হন তবে আমি এটি সম্পর্কে এখানে একটি নিবন্ধ লিখেছি ।

এই উত্তরেapp.js প্রক্রিয়াটির আরও গভীরতর পরীক্ষা-নিরীক্ষা রয়েছে ।

স্কোপ বাইন্ডিংয়ের বাস্তবায়ন এখানে সংজ্ঞায়িত করা হয়েছে

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

Comments

অ্যালান এটি দুর্দান্ত উত্তর! তথ্যের জন্য আপনাকে ধন্যবাদ. বুলেট পয়েন্ট 3 সম্পর্কিত কীভাবে এটি সদ্য ইনস্ট্যান্টেটেড অবজেক্টে অতিরিক্ত ডেটা কী যুক্ত করবে। এটি সম্পত্তি বা অন্য কিছু হতে হবে?

— টিমিক