UI5のスマートフォームのonAfterRenderingフック

Question

私のアプリでは、smartformで構成されるXMLビューがあります。私は、スマートフォームが解析されレンダリングされた後に利用可能になる入力要素（sap.ui.getCore().byId()経由）にアクセスする必要があります。

ビューがレンダリングされると（私のタイトル以外のすべての非スマートフォーム要素を取得するなど）、スマートフォームが解析されてレンダリングされる前に、ビューのコントローラ内のonAfterRenderingがトリガされます。 alertによる初歩的なテストでも、これが視覚的に証明されました。

入力要素にアクセスするためにスマートフォームがレンダリングされた後にトリガーされるイベントはありますか？

開発者ガイドwalkthroughはスマートフォームを拡張しているため、initメソッドがありますが、私の場合はbasecontrollerを拡張しています。私のinitはページビュー用です。

ありがとうございます。

マイビュー：

<mvc:View 
controllerName="myns.controller.Add" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns:semantic="sap.m.semantic" 
xmlns:smartfield="sap.ui.comp.smartfield" 
xmlns:smartform="sap.ui.comp.smartform" 
xmlns="sap.m"> 
<semantic:FullscreenPage 
    id="page" 
    title="{i18n>addPageTitle}" 
    showNavButton="true" 
    navButtonPress="onNavBack"> 
    <semantic:content> 
     <smartform:SmartForm 
      id="form" 
      editable="true" 
      title="{i18n>formTitle}" 
      class="sapUiResponsiveMargin" > 
      <smartform:Group 
       id="formGroup" 
       label="{i18n>formGroupLabel}"> 
       <smartform:GroupElement> 
        <smartfield:SmartField 
         id="nameField" 
         value="{Name}" /> 
       </smartform:GroupElement> 
      </smartform:Group> 
     </smartform:SmartForm> 
    </semantic:content> 
    <semantic:saveAction> 
     <semantic:SaveAction id="save" press="onSave"/> 
    </semantic:saveAction> 
    <semantic:cancelAction> 
     <semantic:CancelAction id="cancel" press="onCancel"/> 
    </semantic:cancelAction> 
</semantic:FullscreenPage> 

マイコントローラー：

sap.ui.define([ 
"myns/controller/BaseController", 
"sap/ui/core/routing/History", 
"sap/m/MessageToast" 
],function(BaseController, History, MessageToast){ 
"use strict"; 
return BaseController.extend("myns.controller.Add",{ 
    onInit: function(){ 
     this.getRouter().getRoute("add").attachPatternMatched(this._onRouteMatched, this); 
    }, 
    onAfterRendering: function(){ 
     //I tried my sap.ui.getCore().byId() here but does not work 
     //An alert shows me this triggers before the smartform is rendered but 
     //after all the other non-smartform elements have rendered 
    }, 
    _onRouteMatched: function(){ 
     // register for metadata loaded events 
     var oModel = this.getModel(); 
     oModel.metadataLoaded().then(this._onMetadataLoaded.bind(this)); 
    }, 
    _onMetadataLoaded:function(){ 
     //code here.... 
    }, 
    onNavBack: function(){ 
     //code here.... 
    } 
}); 

}）;

Answer 1

DOMにSmartFormが追加されたときに、DOMNodeInsertedイベントがjQueryのときに検索できます。 この場合、idを使用してSmartFormを識別し、DOMに追加できます。それはDOMに追加された後

すべてUI5要素はいくつかの接頭辞を取得します。

__xmlview0 - フォーム。

必須のフォームが追加されていることを確認するには、追加された要素のIDをsplitに入力してから、それを与えられたidと比較します。

それが最適解ではないのですが、あなたは試すことができますが。

onAfterRendering: function() { 
    $(document).bind('DOMNodeInserted', function(event) { 
     var aId = $(event.target).attr("id").split("--"); 
     var id = aId[aId.length - 1]; 
     if (id) { 
      if (id == "form") { 
       // smart form fields are accessible here 
       $(document).unbind("DOMNodeInserted"); 
      } 
     } 
    }) 
} 

Answer 2

マイ最終溶液を（今のとは@Dopedevによって提供受け入れ答えを使用）：

ため

onAfterRendering: function() { 
    $(document).bind('DOMNodeInserted', function(event) { 
     var elem = $(event.target); 
     var aId = elem.attr("id").split("--"); 
     var id = aId[aId.length - 1]; 
     if (id) { 
      if (id == "nameField") { 
       elem.find("input").on({ 
        focus: function(oEvent) { 
         //code here; 
        }, 
        blur: function(oEvent) { 
         //code here; 
        } 
       }); 
       /* 
       elem.find("input").get(0).attachBrowserEvent("focus", function(evt) { 
        //code here 
       }).attachBrowserEvent("blur", function(ev) { 
        //code here 
       }); 
       */ 
       $(document).unbind("DOMNodeInserted"); 
      } 
     } 
    }); 
}