ajax - magento2:使用 Ajax 加载 uicomponent

Question

这几天我一直在为此苦苦挣扎……
对于管理扩展，我正在尝试使用 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();
}
}

这是简单的 Controller 布局:

<?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模块丛林中处理了一堆回调和钩子(Hook)。最终触发了“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 (在浏览器控制台中跟踪)但是......没有任何 react 。我的加载

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

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

任何启示将不胜感激。

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

Answer 1

我遇到了您在类似情况下遇到的相同问题。在这种情况下，绑定(bind)似乎没有按应有的方式应用，或者至少没有按应有的方式应用。为了在不更改模板的情况下修复它，我使用了一些额外的 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>