onAfterRendering hook for smartform in UI5

问题:

In my app i have an XML view that consists of a smartform. I have a need to access an input element(via sap.ui.getCore().byId()) that becomes available after the smartform is parsed and rendered.

The onAfterRendering in the controller for my view triggers as soon as the view is rendered(i get all my non-smartform elements like title etc.), but before the smartform is parsed and rendered. A rudimentary test via an alert also proved this visually.

Is there any event that is triggered after the smartform has rendered which i can hook into to access my input element?

The developer guide walkthrough is extending the smartform and thus has its init method, but in my case i am extending the basecontroller and my init is for the page view.

Thanks for any pointers.

My View:

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

My Controller:

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

});

回答1:

You can look for when SmartForm is added to the DOM with DOMNodeInserted event of jQuery. For this you can use it's id to identify the SmartForm has been added to the DOM.

Every UI5 element gets some prefix after it has been added to the DOM.

for e.g. __xmlview0--form.

So to make sure required form is added you can split the id of added element, then compare it with id which you have given.

Although it's not optimal solution, but you can try.

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

回答2:

My final solution (for now and uses the accepted answer provided by @Dopedev):

(in controller for the nested view containing the smartform)

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