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加載一個自定義組件

回答

相關問題