【发布时间】：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 height="35rem" width="100%" 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 标准，你将需要使用灵活的列布局，否则可能会有更少的人愿意调查问题
-
不确定这是否是将粘贴复制到 StackOverflow 时出错，但您的详细视图的第一行有错误，即“controllerName”的未闭合引号
标签： sapui5 splitcontainer element-binding