无法在 sapui5 中使用 splitcontainer 在详细页面中显示数据？
Posted
技术标签:
【中文标题】无法在 sapui5 中使用 splitcontainer 在详细页面中显示数据？【英文标题】：Not able to display data in detail page using splitcontainer in sapui5? 【发布时间】：2019-04-03 03:19:40 【问题描述】：我在我的应用程序中使用 splitcontainer。我使用了两种视图，一种用于母版页，另一种用于详细信息页。
这是我的视图代码：Main.view.xml（包含主视图和详细视图）
<SplitContainer id="idSplitContainer">
<masterPages>
<mvc:XMLView id="master" viewName="com.test.view.Master"/>
</masterPages>
<detailPages>
<mvc:XMLView id="detail" viewName="com.test.view.Detail"/>
</detailPages>
</SplitContainer>
Master.view.xml：
<ScrollContainer horizontal="false" vertical="true" focusable="false">
<Table id="listTable" inset="false" items=" path: 'testModel>/testCollection'" fixedLayout="false">
<columns>
<Column>
<Text text=" Number"/></Column>
<Column>
<Text text="Description"/> </Column>
<Column>
<Text text="Status"/>
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle" type="Navigation" press="onSelectionChange">
<cells>
<Text text="testModel>Number" wrapping="false"/>
<Text text="testModel>Description" wrapping="false"/>
<Text text="testModel>Status" wrapping="false"/>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
Detail.view.xml
<mvc:View controllerName=com.test.controller.Detail" xmlns="sap.m" xmlns:form="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:commons="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc">
<form:Form >
<form:layout>
<form:ResponsiveGridLayout columnsM="1" columnsL="1" labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2" />
</form:layout>
<form:formContainers>
<form:FormContainer>
<form:formElements>
<form:FormElement>
<form:fields>
<Label id="DescriptionLabel" text="Description" />
<Input value="testModel>Description"></Input>
</form:fields>
</form:FormElement>
</form:formElements>
</form:FormContainer>
</form:formContainers>
</form:Form>
</mvc:View>
Component.js
routing:
config:
routerClass: "sap.m.routing.Router",
viewPath: "com.test.view",
controlId: "SplitContainer",
viewType: "XML",
async: true
,
routes: [
name: "master",
pattern: "",
target: ["master"]
,
name: "testDetails",
pattern: "test/:Number:",
target: ["testDetails"]
],
targets:
master:
viewName: "Master",
controlAggregation: "masterPages",
viewLevel: 0
,
testDetails:
viewName: "Detail",
controlAggregation: "detailPages",
viewLevel: 1
,
var sampleData =
"testCollection": [
"Description": "Test Description1",
"Status": "Completed",
"Number":10021
,
"Description": "Test Description2",
"Status": "Completed",
"Number":10025
]
;
var oModel = new sap.ui.model.json.JSONModel(sampleData);
this.setModel(oModel,"testModel");
我在组件级别设置模型，并且在主视图和详细视图中都使用。
Master.controller.js
onSelectionChange: function (oEvent)
var sNum = oEvent.getSource().getBindingContext("testModel").getObject().Number;
this.getOwnerComponent().getRouter().navTo("testDetails",
Number: sNum
, false);
Detail.controller.js：
onInit: function()
this.getOwnerComponent().getRouter().getRoute("testDetails").attachPatternMatched(this._onRouteMatched, this);
,
_onRouteMatched: function(oEvent)
this._sNum = oEvent.getParameter("arguments").Number;
this.getView().bindElement("testModel>/testCollection/"+this._sNum);
问题：
我无法在详细信息视图中显示选定表格行的详细信息。
请指导我。
【问题讨论】：
Chrome 开发工具控制台中显示的任何错误？ 对于主细节关系，您应该使用灵活的列布局，请查看设计指南experience.sap.com/fiori-design-web/flexible-column-layout @Erch 早些时候我们使用统一的 SplitContainer ，因为它已被弃用。我们正在使用 m SplitContainer 正如我所说，如果你想遵循 sap 标准，你将需要使用灵活的列布局，否则可能会有更少的人愿意调查问题 不确定这是否是将粘贴复制到 *** 时出错，但您的详细视图的第一行有错误，即“controllerName”的未闭合引号 【参考方案1】：原因主要是由于您使用bindElement 的方式。声明"testModel>/testCollection/"+this._sNum 不清楚。试试下面的，
在主控制器的函数onSelectionChange中这样做，
onSelectionChange: function (oEvent)
var sContextPath = oEvent.getSource().getBindingContext("testModel").getPath();
this.getOwnerComponent().getRouter().navTo("testDetails",
Path: sContextPath
, false);
接下来在详细控制器的函数_onRouteMatched 中执行此操作，
_onRouteMatched: function(oEvent)
this.getView().bindElement(path: oEvent.getParameter("arguments").Path , model: "testModel");
【讨论】：
【参考方案2】：我对主视图/主视图、示例数据和两个控制器进行了一些更改。主要问题在于您的主视图和数据。这是一个有效的Plnkr 或见下文：
在 Manifest.json 或您的 Component.js
"routing":
"config":
"routerClass": "sap.m.routing.Router",
"viewPath": "com.test.view",
"controlId": "rootControl",
"viewType": "XML",
"async": true,
"bypassed":
"target": ["master"]
,
"routes": [
"name": "master",
"pattern": "",
"target": ["master"]
,
"name": "detail",
"pattern": "testCollection/:detailID:", <<Change
"target": ["master", "detail"]
],
"targets":
"master":
"viewName": "Master",
"controlAggregation": "masterPages",
"viewLevel": "0"
,
"detail":
"viewName": "Detail",
"controlAggregation": "detailPages",
"viewLevel": "1"
在 master.view.xml 中，我建议您不要使用表作为主控，而是使用列表：
<mvc:View controllerName="com.test.controller.Detail" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:semantic="sap.m.semantic">
<semantic:MasterPage id="page" title="Contents">
<semantic:content>
<ScrollContainer horizontal="false" vertical="true" focusable="false">
<List id="list" items="testModel>/testCollection" mode="SingleSelectMaster" noDataText="No List Found" growing="true" growingScrollToLoad="true" selectionChange="onSelectionChange" updateFinished="onUpdateFinished">
<items>
<StandardListItem title="testModel>Description" type="Active" press="onSelectionChange" description="testModel>Number" />
</items>
</List> <!--List instead of a table -->
</ScrollContainer>
</semantic:content>
</semantic:MasterPage>
</mvc:View>在您的 Master.controller.js 中，改动很少，主要是添加了.getSelectedItem() 方法（不适用于移动设备）：
onInit: function()
this.getOwnerComponent().getRouter().getRoute("master").attachPatternMatched(this._onRouteMatched, this);
,
_onRouteMatched: function(oEvent) //<<Inital
if (!Device.system.phone)
this.getOwnerComponent().getRouter()
.navTo("detail",
detailID: 0
, true);
,
onSelectionChange: function(oEvent)
var sNum = oEvent.getSource().getSelectedItem().getBindingContext("testModel").getProperty("id"); //<<selectedItem using id
this.getOwnerComponent().getRouter().navTo("detail",
detailID: sNum
, false);
在Detail.view.xml中，可以保持不变或添加语义标签：
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:form="sap.ui.layout.form" controllerName="com.test.controller.Detail" xmlns:semantic="sap.m.semantic">
<semantic:DetailPage id="page" title="i18n>detailTitle" navButtonPress="onNavBack">
<semantic:content>
<form:Form>
<form:layout>
<form:ResponsiveGridLayout columnsM="1" columnsL="1" labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2" />
</form:layout>
<form:formContainers>
<form:FormContainer>
<form:formElements>
<form:FormElement>
<form:fields>
<Label id="DescriptionLabel" text="Description" />
<Input value="testModel>Description"></Input>
</form:fields>
</form:FormElement>
</form:formElements>
</form:FormContainer>
</form:formContainers>
</form:Form>
</semantic:content>
</semantic:DetailPage>
</mvc:View> <!--same but with semanticpage attribute -->在你的 Detail.controller.js
onInit: function()
this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
,
_onRouteMatched: function(oEvent)
this._sNum = oEvent.getParameter("arguments").detailID;
this.getView().bindElement(
path: "/testCollection/" + this._sNum,
model: "testModel"
);
data.json 或您的 Component.js 通过 ID 跟踪的一个小补充：
"testCollection": [
"id": 0, //<<tracked by id
"Description": "Test Description1",
"Status": "Completed",
"Number": 10021
,
"id": 1,
"Description": "Test Description2",
"Status": "Completed",
"Number": 10025
]
【讨论】：
以上是关于无法在 sapui5 中使用 splitcontainer 在详细页面中显示数据？的主要内容，如果未能解决你的问题，请参考以下文章
SAPUI5 在 JSON 模型 2 中使用来自 JSON 模型 1 的值