SAP UI5：通过两个不同的 OData URL 从主页面和详细信息页面导航

Question

我正在尝试使用 SAPUI5 中的 OData servicea 创建主 - 详细信息页面。在母版页中一切正常。这意味着我可以使用 OData URL 使用来自 SAP 后端的有效数据填充列表。

现在我想要实现的是，调用第二个 OData URL 来获取详细信息值并将其填充到页面中。

我的Master.controller.js

handleListSelect : function (evt) { 
        var context = evt.getParameter("listItem").getBindingContext(); 
        this.nav.to("Detail", context); 
         console.log('evt.getSource: ' + evt.getSource());
            console.log('evt.getBindingContext: ' + evt.getSource().getBindingContext());
    }

控制台输出给出

"evt.getSource: Element sap.m.List#Master--list" sap-ui-core.js line 80 > eval:31
"evt.getBindingContext: undefined"

我无法从第二个 URL 填充详细信息页面中的值。任何人都可以指导或帮助我吗？

我的 Compenent.js

createContent : function() {

    // create root view
    var oView = sap.ui.view({
        id : "app",
        viewName : "sap.ui.demo.myFiori.view.App",
        type : "JS",
        viewData : {
            component : this
        }
    });

     // Using OData model to connect against a real service
     var url = "/MyFioriUI5/proxy/sap/opu/odata/sap/XXXXXX;mo/";
     var oModel = new sap.ui.model.odata.ODataModel(url, true, "", "");
     oView.setModel(oModel);

    // set i18n model
    var i18nModel = new sap.ui.model.resource.ResourceModel({
        bundleUrl : "i18n/messageBundle.properties"
    });
    oView.setModel(i18nModel, "i18n");

    // set device model
    var deviceModel = new sap.ui.model.json.JSONModel({
            isPhone : jQuery.device.is.phone,
            isNoPhone : !jQuery.device.is.phone,
            listMode : (jQuery.device.is.phone) ? "None" : "SingleSelectMaster",
            listItemType : (jQuery.device.is.phone) ? "Active" : "Inactive"
    });
    deviceModel.setDefaultBindingMode("OneWay");
    oView.setModel(deviceModel, "device");

        // Using a local model for offline development
//      var oModel = new sap.ui.model.json.JSONModel("model/mock.json");
//      oView.setModel(oModel);

    // done
    return oView;
}

我的Detail.controller.js

sap.ui.controller("sap.ui.demo.myFiori.view.Detail", {

    handleNavButtonPress : function(evt) {
        this.nav.back("Master");
    },

    onBeforeRendering : function() {
//      this.byId("SupplierForm").bindElement("BusinessPartner");
    },

    handleApprove : function(evt) {
        // show confirmation dialog
        var bundle = this.getView().getModel("i18n").getResourceBundle();
        sap.m.MessageBox.confirm(bundle.getText("ApproveDialogMsg"), function(oAction) {
            if (sap.m.MessageBox.Action.OK === oAction) {
                // notify user
                var successMsg = bundle.getText("ApproveDialogSuccessMsg");
                sap.m.MessageToast.show(successMsg);
                // TODO call proper service method and update model (not part of this session)
            }
        },

        bundle.getText("ApproveDialogTitle"));
    }
});

Answer 1

我看不到您引用的第二个 URL，但我们是这样处理的。

在 Component.js 中：

var oView = sap.ui.view({
    id: "app",
    viewName: "fom.test.app.view.App",
    type: "JS",
    viewData: { component : this }
});
var dataModel = new sap.ui.model.odata.ODataModel("/fom/fiori/odata/FOM/mobile_app_srv", true);
oView.setModel(dataModel);

这会将主视图连接到所有列表项的数据。

在 App.controller.js 中，我们使用 Detail.controller.js 中定义的 onNavigation 函数。这意味着当路由到详细视图时，会在设置视图之前调用 onNavigation 函数。

App.controller.js：

to : function (pageId, context) {

    var app = this.getView().app;

    // load page on demand
    var master = ("Master" === pageId);
    if (app.getPage(pageId, master) === null) {
        var page = sap.ui.view({
            id : pageId,
            viewName : "fom.test.app.view.view." + pageId,
            type : "XML"
        });
        page.getController().nav = this;
        app.addPage(page, master);
        jQuery.sap.log.info("app controller > loaded page: " + pageId);
    }

    // show the page
    app.to(pageId);

    // set data context on the page
    if (context) {
        var page = app.getPage(pageId);
        page.setBindingContext(context);

        try{
            var oController = page.getController();
            oController.onNavigation(context);
        }
        catch(e){ }
    }
},

Detail.controller.js：

onNavigation: function(context) {
    this.getView().bindElement({
        path: context.sPath,
        parameters: {
            select: "Id," +
                    "Lifnam," +
                    "Rmwwr," +
                    "Waers," +
                    "Sendedatum," +
                    "Workflowtyp," +
                    "Sktodat," +
                    "Stufe," +
                    "MonFrgstA," +
                    "Bukrs," +
                    "Belnr," +
                    "Gjahr," +
                    "EdcObject," +
                    "BstatTxt",
            expand: "Positions"
        }
    });
},

bindElements() 函数将详细视图连接到另一个 Web 服务调用的结果，该调用获取 select 中提到的所有属性以及通过展开获取的行项目。

现在您的第一个 Web 服务调用仅加载与主视图列表相关的数据，第二个调用加载所选列表项的所有信息。

当您使用 UI5 的较新的路由功能时，您将需要为挂钩找到另一个位置。我还没有内置它。

Answer 2

oView.setModel(oModel);

您有两次此语句 - 一个会覆盖另一个 - 您需要提供对第二个实例的替代引用：

例如

oView.setModel(oModel, "local")