onAfterRendering钩在UI5智能表(onAfterRendering hook for

在我的应用我有由的XML视图智能表 。 我有需要访问的输入元件（经由sap.ui.getCore().byId()的智能表被解析和渲染之后变得可用。

该onAfterRendering控制器为我的观点，一旦视图呈现（我把我的所有非智能表元素，如标题等）触发，但是智能表之前被解析和渲染。 通过一个基本的测试alert也证明了这在视觉上。

是否有后，智能表已使我可以挂接到访问我的输入元素时触发任何情况下？

开发人员指南演练是扩大智能表，因而有其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:

你可以看看当SmartForm添加到与DOM DOMNodeInserted的事件jQuery 。 对于这一点，你可以用它的id来识别SmartForm已经被添加到DOM 。

每UI5元素得到了一些前缀，它已被添加到DOM后。

对于如__xmlview0 - 形式。

因此，要确保必要的形式加入的，你可以split的添加元素的ID，然后将它与你所赐给的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");
            }
        }
    });
}

文章来源: onAfterRendering hook for smartform in UI5