Хук onAfterRendering для смарт-формы в UI5

В моем приложении у меня есть представление XML, которое состоит из смарт-формы. У меня есть необходимость доступа к элементу ввода (через sap.ui.getCore().byId()), который становится доступным после анализа и визуализации смарт-формы.

onAfterRendering в контроллере для моего представления срабатывает, как только представление отображается (я получаю все элементы, не относящиеся к смарт-форме, такие как заголовок и т. д.), но до того, как смарт-форма будет проанализирована и обработана. Элементарный тест с помощью alert и доказал это визуально.

Есть ли какое-либо событие, которое запускается после рендеринга смарт-формы, к которому я могу подключиться, чтобы получить доступ к своему элементу ввода?

Пошаговое руководство для разработчиков расширяет смарт-форму и, таким образом, имеет init метод, но в моем случае я расширяю базовый контроллер, и мой 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....
     }
});

});

2 ответа

Решение

Вы можете посмотреть, когда SmartForm добавляется в DOM с DOMNodeInserted событие jQuery, Для этого вы можете использовать это id определить SmartForm был добавлен к DOM,

каждый UI5 Элемент получает некоторый префикс после того, как он был добавлен в DOM.

например, __xmlview0- форма.

Таким образом, чтобы убедиться, что требуемая форма добавлена, вы можете split идентификатор добавленного элемента, затем сравните его с идентификатором, который вы дали.

Хотя это не оптимальное решение, но вы можете попробовать.

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

Мое окончательное решение (пока и использует принятый ответ, предоставленный @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");
            }
        }
    });
}
Другие вопросы по тегам