如何在加载视图之前从 OData 加载 2 个或更多实体

Question

我正在开发一个主从应用程序。

我有 1 个用于主视图 (Master) 的 EntityType 和另一个用于 Detail (Detail) 的 EntityType。我已经创建了一个从 Master 到 Detail 的关联。

主视图完美运行。 细节有两部分：

1. 标题：显示在主视图中选择的行中的一些字段。 （姓名、ID 等等）
2. 主体：它有 2 个碎片。这 2 个片段显示来自 Detail Entity 的信息。

我的问题是：

• 我在控制台中遇到错误，因为从实体类型 Master 中搜索加载到片段上的字段。这意味着在第二个 Binding 完成之前加载了 View && Fragments。

我尝试过的：

• 我使用 BusyIndi​​cator 并控制来自模型的事件（attachRequestComplete 和/或attachEventOnce("dataReceived")），当它们到达时分配view.setBusy(false)。这对我不起作用。

• 我试过了，但是当到达第二个绑定的事件时，视图已经加载了。

在主视图中加载信息后：

function _onUpdateFinished(event) {
    var sPath = selItem.getBindingContextPath().substr(1);
    router.navTo("detail", {
                contextPath: sPath
            });
}

当我在详细视图中加载信息时：

onInit:function(){
   this.getRouter().attachRoutePatternMatched(_onRoutePatternMatched, this);
},

_onRoutePatternMatched( oEvent ){
   var sPath = "/" + oEvent.getParameter("arguments").contextPath;
   view.bindElement({ path: sPath,
                      events: {
                        change: function (oEvent) {
                        },
                        dataRequested: function () {},
                        dataReceived: function (oResponse) {
                            view.byId("iconTabBar").bindElement({
                              path: "Master2Detail",
                              events: {
                                    change: function (oEvents) {
                                    },
                                    dataRequested: function () {},
                                    dataReceived: function (oRespon) {
                                        view.setBusy(false);
                                    }
                               }
                            });
                        }
                        }
                    });
    }

非常感谢您的意见。

我正在考虑将 Master 视图中的值作为 Header 部分的参数传递，并从 Backend 调用 Detail 实体，这样我只有 1 个调用，我假设它可以通过使用带有事件的 onInit() 来工作...

详细视图代码为：

<mvc:View xmlns="sap.m" xmlns:fsem="sap.f.semantic" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
    controllerName="app.masterDetail.controller.Detail">
    <f:DynamicPage id="detailPage" showFooter="true" stickySubheaderProvider="iconTabBar" class="sapUiNoContentPadding">
        <f:title>
            <f:DynamicPageTitle>
                <f:heading>
                    <Title text="i18n>DETAIL_VIEW" wrapping="true"/>
                </f:heading>
                <f:actions>
                    <Button id="btnTrsNew" text="{i18n>DETAIL_NEW}" type="Transparent" press="onNewFile" visible="{screenSetup>/bNewRequest}"/>
                    <Button id="btnTrsSave" text="{i18n>DETAIL_SAVE}" type="Transparent" press="onSaveNew" visible="{screenSetup>/bSaveCredit}"/>
                    <Button id="btnTrsCancel" text="{i18n>DETAIL_CANCEL}" type="Transparent" press="onCancel" visible="{screenSetup>/bCancel}"/>
                </f:actions>
                <f:expandedContent>
                    <Label text="{i18n>DETAIL_NAME}: {Name}"/>
                </f:expandedContent>
                <f:navigationActions>
                    <PagingButton id="paging" count="{ui>/paging/detailCount}" position="{ui>/paging/detailPosition}" positionChange="onPositionChange"
                        visible="{= ${ui>/uiState/actionButtonsInfo/midColumn/exitFullScreen} !== null || ${device>/isPhone} || ${device>/isTablet}}"/>
                    <Button type="Transparent" icon="sap-icon://full-screen" visible="{= ${ui>/uiState/actionButtonsInfo/midColumn/fullScreen} !== null}"
                        press="onFullScreenPress"/>
                    <Button type="Transparent" icon="sap-icon://exit-full-screen"
                        visible="{= ${ui>/uiState/actionButtonsInfo/midColumn/exitFullScreen} !== null}" press="onFullScreenExitPress"/>
                    <Button type="Transparent" icon="sap-icon://decline" visible="{= ${ui>/uiState/actionButtonsInfo/midColumn/closeColumn} !== null}"
                        press="onClose"/>
                </f:navigationActions>
            </f:DynamicPageTitle>
        </f:title>
            <IconTabBar id="iconTabBar" class="sapUiResponsiveContentPadding" tooltip="{i18n>DETAIL_AMOUNT}" expandable="false">
                <items>
                    <IconTabFilter id="currentDetailTab" key="currentDetail" icon="sap-icon://business-one">
                        <core:Fragment id="DetailAmount" fragmentName="app.masterDetail.view.fragments.currentDetail"/>
                    </IconTabFilter>
                    <IconTabFilter id="statusDetailTab" key="statusDetail" icon="sap-icon://bbyd-active-sales" tooltip="{i18n>DETAIL_STATUS}">
                        <core:Fragment id="DetailStatus" fragmentName="app.masterDetail.view.fragments.statusDetail"/>
                    </IconTabFilter>
                </items>
            </IconTabBar>
        </f:content>
        <f:footer>
            <OverflowToolbar>
                <content>
                    <Button id="btnMessages" type="Emphasized" text="{=${messages>/}.length}" icon="sap-icon://message-popup" press="onShowMessages"
                        visible="{=${messages>/}.length > 0}"/>
                    <ToolbarSpacer/>
                    <Button id="btnNew" text="{i18n>DETAIL_NEW}" type="Emphasized" press="onNewFile" visible="{screenSetup>/bNewRequest}"/>
                    <Button id="btnSave" text="{i18n>DETAIL_SAVE}" type="Emphasized" press="onSaveNew" visible="{screenSetup>/bSaveCredit}"/>
                    <Button id="btnCancel" text="{i18n>DETAIL_CANCEL}" type="Reject" press="onCancel" visible="{screenSetup>/bCancel}"/>
                </content>
            </OverflowToolbar>
        </f:footer>
    </f:DynamicPage>
</mvc:View>

这将是一个带有 SmartField 的片段：

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:smartForm="sap.ui.comp.smartform"
    xmlns:smartField="sap.ui.comp.smartfield">
    <VBox class="sapUiSmallMargin" id="creditLimitStatusVBox">
        <smartForm:SmartForm id="sFormStatus" editTogglable="false" editToggled="handleEditToggled" title="{i18n>FRG_STATUS_TITLE}">
            <smartForm:Group>
                <smartForm:GroupElement label="{i18n>FRG_STATUS_STATUS}">
                    <smartField:SmartField value="{Status}"/>
                </smartForm:GroupElement>
                <smartForm:GroupElement label="{i18n>FRG_STATUS_ENDDATE}">
                    <smartField:SmartField value="{Enddate}"/>
                </smartForm:GroupElement>
                <smartForm:GroupElement label="{i18n>FRG_STATUS_DELIVERY}">
                    <smartField:SmartField value="{DeliveryId}"/>
                </smartForm:GroupElement>
            </smartForm:Group>
        </smartForm:SmartForm>
        <smartForm:SmartForm id="sFormItem" editTogglable="false" editToggled="handleEditToggled" title="{i18n>FRG_STATUS_ITEM}">
            <smartForm:Group>
                <smartForm:GroupElement label="{i18n>FRG_STATUS_MATERIAL}">
                    <smartField:SmartField value="{Material}"/>
                </smartForm:GroupElement>
                <smartForm:GroupElement label="{i18n>FRG_STATUS_QUANTITY}">
                    <smartField:SmartField value="{Quantity}"/>
                </smartForm:GroupElement>
                <smartForm:GroupElement label="{i18n>FRG_STATUS_AMOUNT}">
                    <smartField:SmartField value="{Amount}"/>
                </smartForm:GroupElement>
            </smartForm:Group>
        </smartForm:SmartForm>
    </VBox>
</core:FragmentDefinition>

Answer 1

看起来您的代码在详细信息方面绑定了相对路径“Master2Detail”。但最初不应在任何父视图中存在任何现有绑定。

对于绑定路径，您的应用应该或多或少像这样。 UI5 正在向上移动元素以查找数据：

App-> Flexible ColumnLayout/SPlitView -> Master

App-> Flexible ColumnLayout/SPlitView -> 详情

所以调整你的绑定 a 描述这里OData error when bind to an element in a Master-Detail app

其次，您会收到此错误，因为最初在您的主绑定元素和细节之间没有相对绑定。所以UI5只能认为这一定是master的一部分。

如果你在两者之间建立一个相对绑定，你必须自己注入片段。例如。 load the fragment，绑定加载的控件（在我们的例子中是 VBox），然后使用 addItem 等将其附加到视图。