提问
SAPUI5 SAPUI5

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

2020-09-15 17:20发布

站内问答 / UI5
1662 4 5

点击此处---> 群内免费提供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（）{
//
//}

 }）;
 在详细信息视图中，控件未显示与其绑定的数据。
4条回答
悠然的二货
2020-09-15 18:13 .采纳回答

/* ~~~~~~~~~~~解决方案~~~~~~~~~~~ */


 sap.ui.controller（" odatacruddemo.Details"，{


/**
 *在实例化控制器并且已经创建其View控件（如果有）时调用。
 *可用于在视图显示之前对其进行修改，绑定事件处理程序以及进行其他一次性初始化。
 * @memberOf odatacruddemo。详细信息
 */
 onInit：function（）{
 console.log（'onInit（）detailPage被称为'）;
 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）{
         返回c.getObject（）;
         }）;
         console.log（items [0]）;
        
         var dPage = sap.ui.getCore（）。byId（'detailsPage'）;
         dPage.getModel（）。setData（items [0]）;
              }，
         }）;

 }


 }）;

一周热门 更多>