টি এল; ডিআর
এটি আসলেই একটি আকর্ষণীয় সমস্যা।
এখানে আমি সিস্টেমটি কীভাবে বুঝতে পেরেছি তা কিন্তু 100% সঠিক নাও হতে পারি।
যেমন আপনি শিরোনাম কলামটি ক্লিক করে দেখেছেন নীচের রুটে একটি AJAX অনুরোধ উত্পন্ন হয়েছে: /admin_key/mui/index/render
নিম্নলিখিত পরামিতি সহ:
- ফিল্টার [প্লেসহোল্ডার]
- isAjax
- নামস্থান
- পেজিং [বর্তমান]
- পেজিং [pageSize]
- অনুসন্ধান
- বাছাই [DIRECTION]
- বাছাই [ক্ষেত্র]
সর্বশেষে সেই ক্ষেত্রটি যেখানে আপনি আপনার গ্রিড বাছাই করছেন।
এই রুটটি এখানে ডিফল্ট হিসাবে ঘোষণা করা হয় app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
:
<insertListing class="Magento\Ui\Component\Container">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/components/insert-listing</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="render_url" xsi:type="url" path="mui/index/render"/>
<item name="autoRender" xsi:type="boolean">false</item>
<item name="dataLinks" xsi:type="array">
<item name="imports" xsi:type="boolean">true</item>
<item name="exports" xsi:type="boolean">false</item>
</item>
<item name="realTimeLink" xsi:type="boolean">true</item>
</item>
</argument>
</insertListing>
তবে একটি তালিকায় ui_comp घटक এক্সএমএল এটি ঘোষণা করা হয়েছে:
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">page_id</item>
</item>
</item>
</argument>
এই রুটটি app/code/Magento/Ui/Controller/Adminhtml/Index/Render.php
নেমস্পেস প্যারামিটারের ভিত্তিতে পরিচালনা করা হয় (যা সাধারণত আপনার ইউআই অংশের নাম হয়)
public function execute()
{
if ($this->_request->getParam('namespace') === null) {
$this->_redirect('admin/noroute');
return;
}
$component = $this->factory->create($this->_request->getParam('namespace'));
$this->prepareComponent($component);
$this->_response->appendBody((string) $component->render());
}
যেখানে prepareComponent
শিশুদের উপাদানগুলিতে পদ্ধতিটি পুনরাবৃত্তি হয়:
protected function prepareComponent(UiComponentInterface $component)
{
foreach ($component->getChildComponents() as $child) {
$this->prepareComponent($child);
}
$component->prepare();
}
কলামের উপাদান প্রস্তুত হয়ে গেলে কলাম সাজানোর কাজটি পরিচালনা করে app/code/Magento/Ui/Component/Listing/Columns/Column.php
:
public function prepare()
{
$this->addFieldToSelect();
$dataType = $this->getData('config/dataType');
if ($dataType) {
$this->wrappedComponent = $this->uiComponentFactory->create(
$this->getName(),
$dataType,
array_merge(['context' => $this->getContext()], (array) $this->getData())
);
$this->wrappedComponent->prepare();
$wrappedComponentConfig = $this->getJsConfig($this->wrappedComponent);
// Merge JS configuration with wrapped component configuration
$jsConfig = array_replace_recursive($wrappedComponentConfig, $this->getJsConfig($this));
$this->setData('js_config', $jsConfig);
$this->setData(
'config',
array_replace_recursive(
(array)$this->wrappedComponent->getData('config'),
(array)$this->getData('config')
)
);
}
$this->applySorting();
parent::prepare();
}
কোথায় applySorting()
পদ্ধতি বাছাই পরামিতি উপর ভিত্তি করে এবং এটা শুধু ডেটা প্রদানকারী করার যোগ করেছেন:
protected function applySorting()
{
$sorting = $this->getContext()->getRequestParam('sorting');
$isSortable = $this->getData('config/sortable');
if ($isSortable !== false
&& !empty($sorting['field'])
&& !empty($sorting['direction'])
&& $sorting['field'] === $this->getName()
) {
$this->getContext()->getDataProvider()->addOrder(
$this->getName(),
strtoupper($sorting['direction'])
);
}
}
প্রতিটি উপাদান প্রস্তুত হয়ে গেলে, ক্রিয়া শ্রেণি প্রতিক্রিয়াটির জন্য উপাদানটিকে পুনরায় সরবরাহ করে (আবার পুনরাবৃত্তভাবে):
$this->_response->appendBody((string) $component->render());
আমি মনে করি সেগুলি বাছাইয়ের সময় কী ঘটে তার গুরুত্বপূর্ণ PHP পদক্ষেপগুলি।
এখন জেএসের কাছে রেন্ডার এবং আপডেট ইউআরএলগুলি ( definition.xml
উপরে ঘোষণা করা ) এতে উপাদানটিতে অর্পিত হয়েছে app/code/Magento/Ui/view/base/web/js/form/components/insert.js
:
return Element.extend({
defaults: {
content: '',
template: 'ui/form/insert',
showSpinner: true,
loading: false,
autoRender: true,
visible: true,
contentSelector: '${$.name}',
externalData: [],
params: {
namespace: '${ $.ns }'
},
renderSettings: {
url: '${ $.render_url }',
dataType: 'html'
},
updateSettings: {
url: '${ $.update_url }',
dataType: 'json'
},
imports: {},
exports: {},
listens: {},
links: {
value: '${ $.provider }:${ $.dataScope}'
},
modules: {
externalSource: '${ $.externalProvider }'
}
}
এখনও এই ফাইলে, requestData
AJAX ডেটা পুনরুদ্ধার করতে একটি পদ্ধতি ব্যবহার করা হয়:
requestData: function (params, ajaxSettings) {
var query = utils.copy(params);
ajaxSettings = _.extend({
url: this['update_url'],
method: 'GET',
data: query,
dataType: 'json'
}, ajaxSettings);
this.loading(true);
return $.ajax(ajaxSettings);
}
আপনি দেখতে পাবেন যে পদ্ধতিটি যখন ডাকা হয় তখন এই render()
পদ্ধতিটি বলা হয়:
$.async({
component: this.name,
ctx: '.' + this.contentSelector
}, function (el) {
self.contentEl = $(el);
self.startRender = true;
params = _.extend({}, self.params, params || {});
request = self.requestData(params, self.renderSettings);
request
.done(self.onRender)
.fail(self.onError);
});
এটি হয়ে গেলে, ডেটা প্রয়োগের জন্য একটি কলব্যাক পদ্ধতি কল করা হয়। এটি হ'ল onRender()
:
onRender: function (data) {
this.loading(false);
this.set('content', data);
this.isRendered = true;
this.startRender = false;
}
আমি মনে করি সেখানে নতুন সামগ্রী প্রয়োগ করা হচ্ছে।