magento2：使用 Ajax 加载 uicomponent

Posted 2023-02-23

【中文标题】magento2：使用 Ajax 加载 uicomponent

【英文标题】：magento2: loading an uicomponent with Ajax

【发布时间】：2017-06-15 06:46:07

【问题描述】：

我已经为此苦苦挣扎了好几天... 对于管理员扩展，我正在尝试使用 Ajax 加载 uiComponent 以显示在选项卡中。 uiComponent 已正确加载，但似乎没有被客户端淘汰逻辑完全处理。

namespace Man4x\MondialRelay2\Block\Adminhtml\Shipping;

class Tabs
extends \Magento\Backend\Block\Widget\Tabs 
protected function _construct()

    parent::_construct();
    $this->setId('mondialrelay2_shipping_tabs');
    $this->setDestElementId('container');
    $this->setTitle(__('MondialRelay'));
 

protected function _beforeToHtml()

    $this->addTab(
        'mass_shipping',
        [
            'label' => __('Mass Shipping'),
            'title' => __('Mass Shipping'),
            'url'   => $this->getUrl('*/*/massshipping', ['_current' => true]),
            'class'  => 'ajax'
        ]
    );

    return parent::_beforeToHtml();

这是简单的控制器布局：

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<container name="root" label="Root">
    <uiComponent name="mondialrelay2_massshipping_grid"/>
</container>

注意：当以标准（即非 AJAX）方式加载时，此自定义 uiComponent 可完美运行

当跟踪 AJAX 响应时，我可以看到加载了 uiComponent 的正确 HTML 代码（包括 Magento 特定的“x-magento-init”标签）。然后由 jquery-ui 回调处理：

    this.xhr = $.ajax( this._ajaxSettings( anchor, event, eventData ) );

    // support: jQuery <1.8
    // jQuery <1.8 returns false if the request is canceled in beforeSend,
    // but as of 1.8, $.ajax() always returns a jqXHR object.
    if ( this.xhr && this.xhr.statusText !== "canceled" ) 
        tab.addClass( "ui-tabs-loading" );
        panel.attr( "aria-busy", "true" );

        this.xhr
            .success(function( response ) 
                // support: jQuery <1.8
                // http://bugs.jquery.com/ticket/11778
                setTimeout(function() 
                    panel.html( response );
                    that._trigger( "load", event, eventData );
                , 1 );
            )

...用于将加载的 HTML 代码插入到容器标记中。 然后，在js模块丛林中处理了一堆回调和钩子。最终触发了“contentUpdated”事件，导致：

/**
 * Init components inside of dynamically updated elements
 */
$('body').on('contentUpdated', function () 
    if (mage) 
        mage.apply();
    
);

return $.mage;
));

mage/apply/main.js 和 mage/apply/scripts.js 然后被正确调用（在浏览器控制台中跟踪）但是......没有任何反应。我的加载

<script type="x-magento-init">

消失了，但我的组件 JS 逻辑根本没有处理。

任何启示将不胜感激。

PS：经过深入调查，似乎确实加载了uiComponent的组件JS文件，而不是它们的模板！

【问题讨论】：

PS：还有两天没有任何修复...... Magento2 前端 js 逻辑是一个纯粹的地狱：30 级调用堆栈，无尽的承诺和闭包。

好吧...一周后我放弃了。 :(((( 从产品页面研究“相关产品”ajax调用后，我想我必须在表单中包含加载AJAX的组件才能触发component/form/insert.js的onRender方法，但是调试 Magento2 客户端逻辑是一场纯粹的瘟疫！如果有人可以帮助我解决这样一个简单的案例，我将不胜感激......

【参考方案1】：

我遇到了您在类似情况下遇到的相同问题。在这种情况下，绑定似乎没有按应有的方式应用，或者至少没有按应有的方式应用。为了在不改变模板的情况下修复它，我使用了一些额外的 xml，在你的情况下，这可能是：

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<container name="root" label="Root" htmlTag="div" htmlId="mondialrelay2">
    <uiComponent name="mondialrelay2_massshipping_grid"/>
    <block class="Magento\Framework\View\Element\Text" name="ajax_ui_component_fix">
        <action method="setText">
            <argument name="text" xsi:type="string"><![CDATA[<script>
                require(['jquery'], function ($) 
                    $('#mondialrelay2').applyBindings();
                );
            </script>]]></argument>
        </action>
    </block>
</container>