Question

我正在尝试使用SAPUI5中的OData servicea创建Master - Detail页面。在Master页面中一切正常。这意味着我能够使用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"

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

我的 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

我看不到您要引用的第二个网址，但我们会这样处理。

在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);

你有两次这个声明 - 一个会覆盖另一个 - 你需要提供对第二个实例的备用引用：

e.g。

oView.setModel(oModel, "local")

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

2 个答案: