magento2：使用Ajax加载一个自定义组件

我一直在为此奋斗...... 对于管理扩展，我试图加载一个带有Ajax的UI组件以显示在选项卡中。 uiComponent被正确加载，但似乎没有被客户端敲除逻辑完全处理。magento2：使用Ajax加载一个自定义组件

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>

注：此自定义UIComponent位于在一个标准的加载时（即，非AJAX）方式

当完美的功能跟踪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模块丛林中进行处理。 A“contentUpdated”事件终于引发，引起：

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

return $.mage; 
}));

法师/应用/ main.js和法师/应用/ scripts.js中，然后正确调用（如浏览器控制台追踪到），但.. 。什么都没发生。我装

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

消失了，但我的组件JS逻辑不处理的。

任何启示将不胜感激。 PS：经过深入调查，似乎uiComponent的组件JS文件实际上是加载的，但不是它们的模板！

来源

2017-01-30 Man4x

PS：再过两天，没有任何固定... Magento2前台JS逻辑是一个纯粹的地狱：30级调用堆栈，无限的承诺和关闭。 – Man4x

要自杀或交谈去园艺... – Man4x

好吧...一个星期后我放弃了。：（（（（（（）在研究产品页面的“相关产品”ajax调用之后，我想我必须在表单中包含AJAX加载的组件，以便将componentRF方法的component/form/insert.js触发，但调试Magento2客户端逻辑是一个纯粹的瘟疫！如果有人可以帮助我这样一个简单的情况下，我真的很感激... – Man4x

我遇到了同样的问题，你在类似的情况。在这种情况下，绑定似乎不适用，或者至少不适用。为了解决这个问题，而不会改变我使出了一些附加的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>

来源

2018-02-28 13:59:33 uiComponentLover666

magento2：使用Ajax加载一个自定义组件

回答

相关问题