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

2020-09-15 17:20发布

点击此处---> 群内免费提供SAP练习系统(在群公告中)加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中) 预期产量 在点击表格详细信...

         点击此处--->   EasySAP.com群内免费提供SAP练习系统(在群公告中)

加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中)


预期产量

在点击表格详细信息页面的一行时,应显示该行的详细信息

问题

  • 数据绑定不起作用。
    • 在详细信息视图中,控件未显示与之绑定的数据。
    • 在详细视图控制器中,如果我在控制台中打印上下文(我通过表上的getSelectedContext()获取),则显示数据,但在视图中控件未显示绑定到数据的数据

index.html

 <!DOCTYPE HTML>
     
         <头>
             
             
             
             <!-仅加载移动库" sap.m"和" sap_bluecrystal"主题->

             <脚本>
                //设置本地资源
                 sap.ui.localResources(" odatacruddemo");

                //创建应用并设置要显示的initialPage
                 var app = new sap.m.App({
                     initialPage:" masterPage"
                 });

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

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

                 app.addPage(masterPage);
                 app.addPage(detailsPage);
                 app.placeAt('content');
             

         
         
             
 Master.view.js

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

   /**指定属于该视图的控制器。
     *在未实现或返回" null"的情况下,该视图没有控制器。
     * @memberOf odatacruddemo.Master
     */
     getControllerName:function(){
         返回" odatacruddemo.Master";
     },

   /**在实例化Controller之后最初被调用一次。 这是构造UI的地方。
     *由于将控制器赋予了此方法,因此可以立即附加其事件处理程序。
     * @memberOf odatacruddemo.Master
     */
     createContent:function(oController){
        //在要添加到表中的数组中添加列
         var aProductTableColumns = [
             新的sap.m.Column({
                 标头:new sap.m.Text({
                     文字:"个人ID"
                 })
             }),
             新的sap.m.Column({
                 标头:new sap.m.Text({
                     文字:"名称"
                 })
             }),
             新的sap.m.Column({
                 标头:new sap.m.Text({
                     文字:" EmployeeID"
                 })
             }),
             新的sap.m.Column({
                 标头:new sap.m.Text({
                     文字:" HireDate"
                 })
             }),
             新的sap.m.Column({
                 标头:new sap.m.Text({
                     文字:"薪水"
                 })
             }),
             新的sap.m.Column({
                 标头:new sap.m.Text({
                     文字:"操作"
                 })
             })

         ];

        //使用ColumnListItem通过单元格聚合将数据添加到表中
         var oTableTemplate = new sap.m.ColumnListItem({
             类型:"导航",
             按下:[oController.onListPress,oController],
             细胞: [
                 新的sap.m.ObjectIdentifier({
                     文字:" {ID}"
                 }),
                 新的sap.m.ObjectIdentifier({
                     文字:" {Name}"
                 }),
                 新的sap.m.ObjectIdentifier({
                     文字:" {EmployeeID}"
                 }),
                 新的sap.m.ObjectIdentifier({
                     文字:" {HireDate}"
                 }),
                 新的sap.m.ObjectIdentifier({
                     文字:" {Salary}",

                 })

             ]
         })。addStyleClass(" sapUiResponsiveMargin");

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


        //创建用于更新/编辑数据的对话框
         var editPersonDetailsDialog = new sap.m.Dialog({
             id:" editPersonDetailsDialog",
             标题:"更新详细信息"
         });

        //创建表
         var oProductTable = new sap.m.Table({
             id:" oProductTable",
             列:aProductTableColumns,
             itemPress:[oController.onListPress,oController]
         });

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

        //将从服务接收的JSON数据与Table绑定
         oProductTable.bindItems("/img/value",oTableTemplate);


         var masterPage = new sap.m.Page({
             标题:"公共数据服务的CRUD操作",
             内容:[
                 oProductTable
             ]
         });

         返回masterPage;
     }
 });


 Master.Controller.js

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

/**
 *在实例化控制器并且已经创建其View控件(如果有)时调用。
 *可用于在视图显示之前对其进行修改,绑定事件处理程序以及进行其他一次性初始化。
 * @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){
            //将模型绑定到视图
             var masterView = sap.ui.getCore()。byId(" masterPage");
             masterView.setModel(oModel);
            //sap.ui.getCore().setModel(oModel);
         });
        //sap.ui.getCore().setModel(oModel);
     },

/**
 *与onAfterRendering类似,但是在重新渲染控制器的View之前调用此钩子
 *(不是在第一个渲染之前!onInit()用于那个!)。
 * @memberOf odatacruddemo.Master
 */
//onBeforeRendering:function(){
//
//},

/**
 *在渲染视图后调用(因此其HTML是文档的一部分)。  HTML的渲染后操作可以在这里完成。
 *此钩子与SAPUI5控件在呈现后获得的钩子相同。
 * @memberOf odatacruddemo.Master
 */
//onAfterRendering:function(){
//
//},

/**
 *在Controller销毁时调用。 使用此工具释放资源并完成活动。
 * @memberOf odatacruddemo.Master
 */
//onExit:function(){
//
//}
     onListPress:函数(oEvent){
         console.log('按下列表项');
        //获取选中的项目
        //获取被点击的行数据
         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(上下文);
          var items = contexts.map(function(c){
              返回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",{

   /**指定属于该视图的控制器。
     *在未实现或返回" null"的情况下,该视图没有控制器。
     * @memberOf odatacruddemo。详细信息
     */
     getControllerName:function(){
         返回" odatacruddemo.Details";
     },

   /**在实例化Controller之后最初被调用一次。 这是构造UI的地方。
     *由于将控制器赋予了此方法,因此可以立即附加其事件处理程序。
     * @memberOf odatacruddemo。详细信息
     */
     createContent:function(oController){
             var oObjectHeader = new sap.m.ObjectHeader({
                 标题:" {Name}",

                 属性:[
                     新的sap.m.ObjectAttribute({
                         文字:" {Name}"
                     })
                 ]
             });
         var detailsPage = new sap.m.Page({
             标题:" DetailsPage",
             内容:[
                 oObjectHeader
             ]
         });
         返回detailsPage;
     }

 });
 Details.controller.js
 sap.ui.controller(" odatacruddemo.Details",{

/**
 *在实例化控制器并且已经创建其View控件(如果有)时调用。
 *可用于在视图显示之前对其进行修改,绑定事件处理程序以及进行其他一次性初始化。
 * @memberOf odatacruddemo。详细信息
 */
     onInit:function(){
         console.log('onInit()detailPage被称为');

     },

/**
 *与onAfterRendering类似,但是在重新渲染控制器的View之前调用此钩子
 *(不是在第一个渲染之前!onInit()用于那个!)。
 * @memberOf odatacruddemo。详细信息
 */
     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){
              返回c.getObject();
              });
          console.log(items [0]);

 },

/**
 *在渲染视图后调用(因此其HTML是文档的一部分)。  HTML的渲染后操作可以在这里完成。
 *此钩子与SAPUI5控件在呈现后获得的钩子相同。
 * @memberOf odatacruddemo。详细信息
 */
//onAfterRendering:function(){
//
//},

/**
 *在Controller销毁时调用。 使用此工具释放资源并完成活动。
 * @memberOf odatacruddemo。详细信息
 */
//onExit:function(){
//
//}

 });
 在详细信息视图中,控件未显示与其绑定的数据。