magento2：Ajaxを使用してuicomponentをロード

Question

私はそれを数日間苦労してきました... 管理者用の拡張機能では、タブに表示するAiaxでuiComponentをロードしようとしています。 uiComponentは正しくロードされていますが、クライアント側のノックアウトロジックでは完全に処理されていないようです。

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

注：ここでは

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

は、シンプルなコントローラのレイアウトである標準（すなわち、非AJAX）の方法

にロードされたときに、このカスタムのuiComponentは完全に機能していますAJAXレスポンスを追跡すると、uiComponentの正しいHTMLコードが読み込まれます（Magento固有の「x-magento-init」タグが含まれています）。ロードされたHTMLコードは、コンテナタグに挿入するために...

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

：それは、その後のjquery-uiをコールバックで処理されています。 その後、コールバックとフックの束がjsモジュールのジャングルで処理されます。 「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ファイルが実際にロードされているようですが、テンプレートは表示されないようです！

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>