UI উপাদান ফাইলগুলিতে "উত্স" আইটেমগুলি কী

Question

ম্যাজেন্টো 2 এর ইউআই ফর্ম উপাদান উপাদান কনফিগারেশন ফাইলগুলিতে আপনি প্রায়শই নীচের - এর itemসাথে একটি বৈশিষ্ট্য দেখতে পাবেন ।source<item name="source" xsi:type="string">block</item>

#File: vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
<field name="title">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Block Title</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">block</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="dataScope" xsi:type="string">title</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>    

এই ক্ষেত্রগুলি কিসের জন্য? আমি জিজ্ঞাসা করি কারণ এগুলি দেখে মনে হয় যে এগুলি প্রয়োজনীয় নয়। উদাহরণস্বরূপ, এই গিটহাব সংগ্রহস্থলের মডিউলটি একটি কার্যক্ষম UI উপাদান ফর্মটি কনফিগার করে, তবে এই name="source"আইটেমগুলি ব্যবহার করে না ।

এই name="source"আইটেমগুলির জন্য কি কেউ জানেন ? আমি UI 'তে কম্পোনেন্ট মিস্ত্রি যে এক্সএমএল লাগে এবং যেমন cofigures সচেতন আছি x-magento-initতাদেরকে JSON

"block_id": {
    "type": "form.input",
    "name": "block_id",
    "dataScope": "block_id",
    "config": {
        "component": "Magento_Ui\/js\/form\/element\/abstract",
        "template": "ui\/form\/field",
        "visible": false,
        "dataType": "text",
        "formElement": "input",
        "source": "block"
    }
},

যা uiElementভিত্তিক নকআউট ভিউ মডেল অবজেক্টে খাওয়ানো হয় । তবে এটি পরিষ্কার নয় যে uiElementভিত্তিক নকআউট ভিউ মডেল অবজেক্টগুলির নেস্টেড ট্রি এই ক্ষেত্রের স্তর sourceক্ষেত্রগুলি কীভাবে ব্যবহার করে ।

আমি যদি uiElementএর initModulesপদ্ধতিটি তাকান

    initModules: function () {
        _.each(this.modules, function (name, property) {
            if (name) {
                this[property] = this.requestModule(name);
            }
        }, this);

        if (!_.isFunction(this.source)) {
            this.source = registry.get(this.provider);
        }

        return this;
    },

আমি অবজেক্টটি কোনও sourceসম্পত্তির রেফারেন্স দেখছি এবং এটি সেট না করা থাকলে providerস্ট্রিং / কী সনাক্তকারী হিসাবে সম্পত্তি ব্যবহার করে কোনও বস্তুর রেজিস্ট্রিতে পৌঁছে যাবে । দেখে মনে হচ্ছে এই sourceআইটেমগুলির মান ব্যবহার করা হয়নি। তবে এটি সম্ভব যে এগুলি পিএইচপি কোড, বা অন্য কোনও জাভাস্ক্রিপ্ট কোড দ্বারা ব্যবহৃত হয়। সুতরাং, আমার প্রশ্ন।

Answer 1

sourceডেটা প্রদানকারী হয়, অথবা হতে হবে। যাইহোক, আমি যা বলতে পারি তা থেকে, <item name="source">আপনি যে এক্সএমএল উদাহরণ দিয়েছেন তাতে নোড কোনও পরিমাপযোগ্য পার্থক্য করে না এবং ফলাফল ছাড়াই অপসারণ করা যায়।

এখানে আমি কীভাবে এলাম: এর initModules()পদ্ধতিতে elements/element.js, this.sourceকলযোগ্য ফাংশন কিনা তা পরীক্ষা করার জন্য রয়েছে:

if (!_.isFunction(this.source)) {
    this.source = registry.get(this.provider);
}

যদি this.sourceকলযোগ্য ফাংশন না হয় তবে এটি ব্যবহার করে রেজিস্ট্রি থেকে কোনও ইউআই কম্পোনেন্টের সাথে ওভাররাইড this.source করে this.provider। আবার এটি হ'ল provider, যদিও না source। যেমন, যদি উত্সটি সেই সময়ে কলযোগ্য ফাংশন না হয় তবে এটি কেবল সরবরাহকারীকে লোড করে এবং মূলটি this.sourceবাতাসের পথে চলে।

this.sourceপ্রায়ই খালি থাকে, কিন্তু ক্ষেত্রে cms_block_form, this.sourceহবে 'block'দিয়ে শুরু করতে। যেহেতু এটি একটি স্ট্রিং এবং কলযোগ্য ফাংশন নয়, এটি কেবল ওভাররাইড করা হয়।

এছাড়াও নোট করুন যে কোনও ইউআই উপাদান চালানোর this.sourceআগে এক্সএমএল থেকে স্ট্রিংয়ের ভিত্তিতে কলযোগ্য ফাংশনে সেট করতে সহজেই কিছু যুক্তি যুক্ত করতে পারে initModules()।

---

এখন, কেন এই উত্সটি প্রথম স্থানে রয়েছে? কেন এটি এক্সএমএলে আছে জানি না, তবে এটি জাভাস্ক্রিপ্টে একটি উদ্দেশ্য করে। উদাহরণস্বরূপ, আমি টানছি grid/columns/column.js। ইন defaults: {}, নিম্নলিখিত আছে:

modules: {
    source: '${ $.provider }'
}

পিছনে elements/element.js, এটি মূল্যায়ন করা হয় initModules():

_.each(this.modules, function (name, property) {
    if (name) {
        this[property] = this.requestModule(name);
    }
}, this);

requestModule()পদ্ধতিটি এখানে :

requestModule: function (name) {
    var requested = this._requesetd;
    if (!requested[name]) {
        requested[name] = registry.async(name);
    }
    return requested[name];
},

async()পদ্ধতি রেজিস্ট্রি থেকে ফিরে, এবং হয় initModules(), সম্পত্তি দেওয়া হস্তান্তর করা হয়েছে। এই ক্ষেত্রে, রেজিস্ট্রি থেকে পদ্ধতি this.sourceহতে সেট করা আছে async()। এটি modules:{}কেবলমাত্র নয়, এর মধ্যে যে কোনও কিছুর জন্য ঘটবে source, তবে sourceকিছু উপাদানগুলির মধ্যে কী ঘটে তা নিয়ে আলোকপাত করে । যে async()ফাংশনটি ফিরে এসেছে তা হ'ল - আশ্চর্যরকম নয় - একটি কলযোগ্য ফাংশন। ফলস্বরূপ, এটি মিথ্যাতে মূল্যায়ন করে এবং এড়িয়ে যায়:

initModules: function () {
    ...

    if (!_.isFunction(this.source)) {
        this.source = registry.get(this.provider);
    }

    return this;
}, 

পিছনে grid/columns/column.js, sourceগ্রিডের বাছাই করতে ব্যবহৃত হয়।

exportSorting: function () {
    ...
    this.source('set', 'params.sorting', {
        field: this.index,
        direction: this.sorting
    });
},

async()পদ্ধতি কার্যকারিতা হ্যান্ডলগুলি, কিন্তু এখানে, এটা কল করছে set()উপর পদ্ধতি this.source()। উৎস, বা, dataProviderহয় grid/provider.jsএবং এটি একটি নেই set()পদ্ধতি। এটি পিতামাতার element/element.js, যদিও,

set: function (path, value) {
    var data = this.get(path),
        diffs;

    diffs = !_.isFunction(data) && !this.isTracked(path) ?
        utils.compare(data, value, path) :
        false;

    utils.nested(this, path, value);

    if (diffs) {
        this._notifyChanges(diffs);
    }

    return this;
},

ধারণাটি set()কিছুটা সহজ যাতে এটি মান আপডেট করে এবং গ্রাহকদের অবহিত করে। সুতরাং, এটিকে columns.jsঘোষণার ফলস্বরূপ source, এটিতে এর প্রয়োগ পদ্ধতি কার্যকর করতে এর সরাসরি অ্যাক্সেস রয়েছে dataProvider।

---

উপসংহার: উত্সটি অন্তত জাভাস্ক্রিপ্ট ক্লাসে ডেটা সরবরাহকারী হিসাবে ব্যবহৃত হয় বলে মনে হয়। যদি কোনও উত্স জাভাস্ক্রিপ্ট শ্রেণিতে সেট করা থাকে এবং এটি কলযোগ্য ফাংশন হয় তবে এটি সরাসরি পদ্ধতিতে কার্যকর করতে ব্যবহার করা যেতে পারে dataProvider।

এটি আমাকে এখনও কয়েকটি প্রশ্ন রেখে যায়, যদিও:

• sourceকোনও ডেটা প্রোভাইডার শ্রেণীর প্রক্সি করার জন্য কি এক্সএমএল ব্যবহার করা সম্ভব ?
• এটি কি এক্সএমএলে কোনও উদ্দেশ্য উপস্থাপন করার কথা বলেছিল তবে কোনও পর্যায়ে অবহেলিত হবে?
• this.source(এক্সএমএল থেকে) এমন কোনও মূল শ্রেণি রয়েছে যা initModules()চালানোর আগে এটির সাথে আকর্ষণীয় কিছু করে ?

Comments

দরকারী তথ্যের জন্য +1 করুন, তবে আমার কাছে একই প্রশ্নটি শেষ করুন - sourceএই এক্সএমএল ফাইলগুলিতে কী করছে :)

— অ্যালান ঝড়

Answer 2

এটির জন্য "উত্স" (কর্ণ) তে গিয়েছিল এবং দেখে মনে হচ্ছে যে এই <item name="source"/>নোডগুলি সত্যই, নিরর্থক। বা, বর্তমানে তাদের দায়িত্বে থাকা ম্যাজেন্টো ইঞ্জিনিয়াররা ভাবেন যে তারা অপ্রয়োজনীয়, তাই এটি সত্যের কাছাকাছি আমরা পেয়ে যাব।

Answer 3

উত্সটি হ'ল চাবি যা ইউআই উপাদানটি " ডেটাপ্রোভাইডার " শ্রেণীর সরবরাহিত ডেটা পড়তে পারে । যখন একাধিক ট্যাব এবং ফিল্ডসেট থাকে এটি খুব কার্যকর।

উদাহরণস্বরূপ: উল্লেখ করুন module-customer/view/base/ui_component/customer_form.xml

<fieldset name="customer">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Account Information</item>
        </item>
    </argument>
    <field name="entity_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="visible" xsi:type="boolean">false</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>

                **<item name="source" xsi:type="string">customer</item>**

            </item>
        </argument>
    </field>
. 
. 
.

<fieldset name="address">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="is_collection" xsi:type="boolean">true</item>
            <item name="label" xsi:type="string" translate="true">Addresses</item>
            <item name="removeMessage" xsi:type="string" translate="true">Are you sure you want to delete this item?</item>
        </item>
    </argument>
    <field name="parent_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="visible" xsi:type="boolean">false</item>
                <item name="dataType" xsi:type="string">number</item>
                <item name="formElement" xsi:type="string">input</item>

                **<item name="source" xsi:type="string">address</item>**

            </item>
        </argument>
    </field>

getData()পদ্ধতি dataProvider বর্গ কী 'গ্রাহক' এবং 'ঠিকানা' এবং ক্ষেত্র-সেটে সংশ্লিষ্ট ক্ষেত্রের সাথে একটি অ্যারের তা থেকে ম্যাপ করা হবে না ফিরে আসবে। স্ক্রিনশটটি getData()পদ্ধতির ফলাফল প্রদর্শন করে ।

এর পরে যখন getDataSourceData()ম্যাজেন্টো \ Ui \ উপাদান \ ফর্মের পদ্ধতিটি বলা হয় তখন এটি উপরের ডেটা প্রক্রিয়া করে।

public function getDataSourceData()
{
    $dataSource = [];

    $id = $this->getContext()->getRequestParam($this->getContext()->getDataProvider()->getRequestFieldName(), null);
    $filter = $this->filterBuilder->setField($this->getContext()->getDataProvider()->getPrimaryFieldName())
        ->setValue($id)
        ->create();
    $this->getContext()->getDataProvider()
        ->addFilter($filter);

    $data = $this->getContext()->getDataProvider()->getData();

    if (isset($data[$id])) {
        $dataSource = [
            'data' => $data[$id]
        ];
    } elseif (isset($data['items'])) {
        foreach ($data['items'] as $item) {
            if ($item[$item['id_field_name']] == $id) {
                **$dataSource = ['data' => ['general' => $item]];**
            }
        }
    }
    return $dataSource;
}

Comments

উত্তরের জন্য ধন্যবাদ. তবে আপনি কি এ সম্পর্কে নিশ্চিত? আমি নিশ্চিত না তুমি ঠিক আছ হ্যাঁ, গ্রাহক ফর্মটিতে JSON ডেটাতে একটি কী নামের গ্রাহক রয়েছে এবং সেই কীটি কাকতালীয়ভাবে নামটির নাম হিসাবে ব্যবহার করে<item name="source নোড । তবে, আমি এমন কোনও পিএইচপি কোড দেখতে পাচ্ছি না যা উত্স নোডের ডেটা উল্লেখ করে। এছাড়াও, সিএমএস পৃষ্ঠা ফর্মটির একটি <item name="source" xsi:type="string">page</item>নোড রয়েছে এবং এর ডেটা উত্স ডেটার কোনও pageকী নেই। অবশেষে, আমার গবেষণা এটি নির্দেশ করে name="dataScope"যা কোনও ক্ষেত্রের মান কোথায় পায় তা নির্ধারণ করে।

— অ্যালান ঝড়

হ্যাঁ, আপনি ঠিক অ্যালান। ডিবাগিংয়ের সময় আমি একই জিনিসটি (ডেটাস্কোপ সম্পর্কে )ও দেখেছি। স্পষ্টতার জন্য ধন্যবাদ। যদি আমি "উত্স" সম্পর্কে আরও কিছু পাই তবে আমি পোস্ট করব।

— পঙ্কজ ভোপ