UI5 中智能表单的 onAfterRendering 钩子 [英] onAfterRendering hook for smartform in UI5

问题描述

在我的应用程序中，我有一个 XML 视图，其中包含一个 smartform.我需要访问一个输入元素(通过 sap.ui.getCore().byId())，该元素在智能表单被解析和呈现后变得可用.

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.

onAfterRendering 控制器中的视图在视图渲染后立即触发(我获得所有非智能表单元素，如标题等)，但在智能表单被解析和呈现之前.通过 alert 进行的基本测试也直观地证明了这一点.

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.

是否有在 smartform 呈现后触发的事件，我可以将其挂钩以访问我的输入元素?

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

开发者指南 演练 正在扩展智能表单和因此有它的 init 方法，但在我的情况下，我正在扩展 basecontroller，而我的 init 用于页面视图.

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.

感谢您的指点.

我的观点:

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

});

推荐答案

您可以通过 jQuery 的 DOMNodeInserted 事件查找何时将 SmartForm 添加到 DOM.为此，您可以使用它的 id 来标识 SmartForm 已添加到 DOM.

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.

每个 UI5 元素在被添加到 DOM 后都会得到一些前缀.

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

例如__xmlview0--表单.

for e.g. __xmlview0--form.

因此，为了确保添加了所需的表单，您可以split 添加元素的 id，然后将其与您提供的 id 进行比较.

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

这篇关于UI5 中智能表单的 onAfterRendering 钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！