Sapui5 SAP UI5：通过两个不同的OData URL从母版页和详细页进行导航

我正在尝试使用SAPUI5中的ODataServiceA创建一个主-详细页面。母版页中的所有内容都可以正常工作。这意味着我能够使用ODataURL从SAP后端用有效数据填充列表

现在我想要实现的是，调用第二个ODataURL来获取细节值并将其填充到页面中

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

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

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

控制台输出提供

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

我无法从第二个URL填充详细信息页面中的值。有人能在这方面指导或帮助我吗

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

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

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

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

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

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

---

我看不到您所引用的第二个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){ }
    }
},

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

Detail.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){ }
    }
},

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中提到的所有属性以及使用expand获取的行项目

现在，第一个webservice调用只加载与主视图列表相关的数据，第二个调用加载所选列表项的所有信息

当您使用UI5较新的路由功能时，需要为钩子找到另一个位置。我还没有把它建进去

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

e、 g

---

handleListSelect

实际处理列表中的哪些事件？当您点击/单击列表中的任何项目时，将调用“handleListSelect”。您发布该问题已有一段时间了。。但是万一你还没有找到解决方案，你能不能也发布“Detail.controller.js”的代码？谢谢@Breakpoint的回复。非常感谢你的关心。是的，我还没有找到解决办法。我已经用“Detail.controller.js”代码更新了我的问题。