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