Question

预期输出
单击表格详细信息页面的一行时，应显示该行的详细信息

问题

数据绑定无效。
- 在详细信息视图中，控件未显示绑定到它的数据。
- 在详细信息视图控制器中，如果我在控制台中打印上下文（我通过表中的getSelectedContext（）获取）它正在显示数据，但是在视图中控件没有显示数据绑定它

的index.html

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
            <script src="resources/sap-ui-core.js"
                    id="sap-ui-bootstrap"
                    data-sap-ui-libs="sap.m"
                    data-sap-ui-theme="sap_bluecrystal">
            </script>
            <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

            <script>
                //set local resources
                sap.ui.localResources("odatacruddemo");

                //create app and set the initialPage to be displayed
                var app = new sap.m.App({
                    initialPage: 'masterPage'
                });

                var masterPage = new sap.ui.view({
                    id: 'masterPage',
                    viewName: 'odatacruddemo.Master',
                    type: sap.ui.core.mvc.ViewType.JS
                });

                var detailsPage = new sap.ui.view({
                    id: 'detailsPage',
                    viewName: 'odatacruddemo.Details',
                    type: sap.ui.core.mvc.ViewType.JS
                });

                app.addPage(masterPage);
                app.addPage(detailsPage);
                app.placeAt('content');
            </script>

        </head>
        <body class="sapUiBody" role="application">
            <div id="content"></div>
        </body>
    </html>

Master.view.js

sap.ui.jsview("odatacruddemo.Master", {

    /** Specifies the Controller belonging to this View. 
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf odatacruddemo.Master
    */ 
    getControllerName : function() {
        return "odatacruddemo.Master";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
    * Since the Controller is given to this method, its event handlers can be attached right away. 
    * @memberOf odatacruddemo.Master
    */ 
    createContent : function(oController) { 
        //add columns in a  array to be added in table
        var aProductTableColumns = [
            new sap.m.Column({
                header: new sap.m.Text({
                    text: 'Person ID'
                })
            }),
            new sap.m.Column({
                header: new sap.m.Text({
                    text: 'Name'
                })
            }),
            new sap.m.Column({
                header: new sap.m.Text({
                    text: 'EmployeeID'
                })
            }),
            new sap.m.Column({
                header: new sap.m.Text({
                    text: 'HireDate'
                })
            }),
            new sap.m.Column({
                header: new sap.m.Text({
                    text: 'Salary'
                })
            }),
            new sap.m.Column({
                header: new sap.m.Text({
                    text: 'Operations'
                })
            })

        ];

        //add the data to the table using cells aggregation by using ColumnListItem
        var oTableTemplate = new sap.m.ColumnListItem({
            type: "Navigation",
            press: [oController.onListPress, oController],
            cells: [
                new sap.m.ObjectIdentifier({
                    text: '{ID}'
                }),
                new sap.m.ObjectIdentifier({
                    text: '{Name}'
                }),
                new sap.m.ObjectIdentifier({
                    text: '{EmployeeID}'
                }),
                new sap.m.ObjectIdentifier({
                    text: '{HireDate}'
                }),
                new sap.m.ObjectIdentifier({
                    text: '{Salary}',

                })

            ]
        }).addStyleClass("sapUiResponsiveMargin");

        //oTableTemplate.setType(sap.m.ListType.Active);


        //create dialog for updating/editing data
        var editPersonDetailsDialog = new sap.m.Dialog({
            id: 'editPersonDetailsDialog',
            title: 'Update Details'
        });

        //create table 
        var oProductTable = new sap.m.Table({
            id: 'oProductTable',
            columns: aProductTableColumns,
            itemPress: [oController.onListPress,oController]
        });

        //oProductTable.setMode(sap.m.ListMode.SingleSelect);
        oProductTable.setMode(sap.m.ListMode.SingleSelectMaster); 

        //bind the JSON data received from the service with Table 
        oProductTable.bindItems("/value",oTableTemplate);


        var masterPage = new sap.m.Page({
            title: "CRUD Operations on Public Odata Service",
            content: [
                oProductTable
            ]
        });

        return masterPage;
    }
});

Master.Controller.js

sap.ui.controller("odatacruddemo.Master", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf odatacruddemo.Master
*/
    onInit: function() {
        var serviceURL = 'http://services.odata.org/V4/OData/OData.svc/Persons?$expand=PersonDetail'; 
        var oModel = new sap.ui.model.json.JSONModel(serviceURL);   
        oModel.attachRequestCompleted(function(oEvent){
            //bind a model to a view
            var masterView = sap.ui.getCore().byId("masterPage");
            masterView.setModel(oModel);
            //sap.ui.getCore().setModel(oModel);
        });
        //sap.ui.getCore().setModel(oModel);
    },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf odatacruddemo.Master
*/
//  onBeforeRendering: function() {
//
//  },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf odatacruddemo.Master
*/
//  onAfterRendering: function() {
//
//  },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf odatacruddemo.Master
*/
//  onExit: function() {
//
//  }
    onListPress: function(oEvent){
        console.log('List Item pressed');   
        //Get the Selected Items
        //get the  row data which has been clicked 
        var clickedItem = sap.ui.getCore().byId('oProductTable').getSelectedItems();
        var cells = clickedItem[0].getCells();

         var contexts = sap.ui.getCore().byId("oProductTable").getSelectedContexts();
         console.log('Master ctx:');
         console.log(contexts);
         var items = contexts.map(function(c) {
             return c.getObject();
             });
         console.log(items[0]);

        var detailsPage = app.getPage('detailsPage');
        detailsPage.setBindingContext(contexts,"data");

        app.to(detailsPage);
        //var detailsView = sap.ui.getCore().byId("detailsPage");
        //detailsView.getModel().setData(items[0]);
        //var oContext = oEvent.getSource().getBindingContext();
        //console.log(oEvent);
    }

});

在上面的代码中，我将bindingContext设置为detailsPage，我可以在detailsPage中获取该上下文，但在视图中它不显示数据。

以下是DetailPage代码： Details.view.js

sap.ui.jsview("odatacruddemo.Details", {

    /** Specifies the Controller belonging to this View. 
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf odatacruddemo.Details
    */ 
    getControllerName : function() {
        return "odatacruddemo.Details";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
    * Since the Controller is given to this method, its event handlers can be attached right away. 
    * @memberOf odatacruddemo.Details
    */ 
    createContent : function(oController) {
            var oObjectHeader = new sap.m.ObjectHeader({
                title: "{Name}",

                attributes:[
                    new sap.m.ObjectAttribute({
                        text: "{Name}"
                    })
                ]
            });
        var detailsPage = new sap.m.Page({
            title: "DetailsPage",
            content: [
                oObjectHeader
            ]
        });
        return detailsPage;
    }

});

Details.controller.js

sap.ui.controller("odatacruddemo.Details", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf odatacruddemo.Details
*/
    onInit: function() {
        console.log('onInit() detailPage called');

    },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf odatacruddemo.Details
*/
    onBeforeRendering: function() {
        var  detailsPage = sap.ui.getCore().byId('detailsPage');
        var context = detailsPage.getBindingContext("data");
        console.log('ctx:=>');
        console.log(context);
        var items = context.map(function(c) {
             return c.getObject();
             });
         console.log(items[0]);

},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf odatacruddemo.Details
*/
//  onAfterRendering: function() {
//
//  },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf odatacruddemo.Details
*/
//  onExit: function() {
//
//  }

});

在详细信息视图中，控件未显示绑定到它的数据请帮忙 ... 提前致谢...

Answer 1

您的表和控件根本没有任何数据绑定。您必须绑定表的项聚合。使用JS Views时，请查看sap.m.Table的这个API https://sapui5.hana.ondemand.com/#/api/sap.m.ListBase/methods/bindItems。

首先，您应该使用XMLViews而不是JsViews。

有关绑定问题，请查看SAPUI5开发人员。从开发者指南中查看此示例并进行操作。

https://sapui5.hana.ondemand.com/#/topic/97830de2d7314e93b5c1ee3878a17be9

Answer 2

sap.ui.controller("odatacruddemo.Details", {

onInit: function() {
    console.log('onInit() detailPage called');
    var oModel2 = new sap.ui.model.json.JSONModel();
    var detailsPage  = sap.ui.getCore().byId('detailsPage');
    detailsPage.setModel(oModel2);
    this.getView().addEventDelegate({
        onBeforeShow : function(evt) {
            var  detailsPage = sap.ui.getCore().byId('detailsPage');
            var context = detailsPage.getBindingContext("data");
            console.log('ctx:=>');
            console.log(context);
            //sap.ui.getCore().getModel().setData(json);


            var items = context.map(function(c) {
                 return c.getObject();
                 });
             console.log(items[0]);

             var dPage = sap.ui.getCore().byId('detailsPage');
             dPage.getModel().setData(items[0]);
         }, 
    });

},
onNavPress: function(){
 app.back();
}});

主详细视图[绑定不起作用] SAPUI5

2 个答案: