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

这是简单的控制器布局：

<?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文件实际上已加载，但不是他们的模板！

Answer 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>