SAPUI5 - 如何设置 link MasterDetail Split App
SAPUI5 - How to set a link a MasterDetail Split App
我正在开发一个 SAPUI5 应用程序,其中包含一个带有一个 MasterPage 和许多 DeatilPages 的 SplitApp。我为 MasterPage 创建了一个 StandartListItems 列表,如果我 select 其中之一,我想显示正确的 DetailPage。但是现在我不知道如何实现它。
填写主页列表:
var oMasterPage = sap.ui.getCore().byId("masterPage");
var masterContentList = sap.ui.getCore().byId("masterList");
masterContentList.bindItems({
path : "/inhaltList",
template : new sap.m.StandardListItem({
title: "{master}"
})
});
我为每个 MasterListItem 创建一个 DetailPage 并将其添加到 SplitApp:
var detailContentList = new sap.m.List({});
detailContentList.bindItems({
path : "/inhaltList",
sorter : new sap.ui.model.Sorter("name"),
template : new sap.m.CustomListItem({
content: [
new sap.m.VBox({
width : "80%",
displayInline : false,
direction: "Column",
items:[
new sap.ui.commons.TextView({text:"titel", design:sap.ui.commons.TextViewDesign.H2}),
//new sap.ui.commons.TextView({text:"{detail>titel}", design:sap.ui.commons.TextViewDesign.H2}),
//new sap.ui.commons.TextView({text:"{detail>content>text}", design:sap.ui.commons.TextViewDesign.Small})
new sap.ui.commons.TextView({text:"textetextetextetexttextexte", design:sap.ui.commons.TextViewDesign.Small})
]
})
]
})
});
var DetailPage = new sap.m.Page({
path : "/inhaltList",
title: "{master}",
content:[
detailContentList
]
});
splitApp.addDetailPage(DetailPage);
最后,我在 SplitApp 中有一个 MasterPage,在一个案例中有 4 个 DetailPage。到此为止。
现在,我想建立从 MasterListItem 到正确的 DetailPage 的关系,以便在我为此选择 MasterListItem 时显示正确的 DetailPage。
有人知道吗?
据我了解,您有 sap.m.StandardListItem 一些项目,您希望在单击项目时切换详细信息。最简单的方法:
1. 为您的项目添加新闻事件。 controller 是一个控制器,如果你在一个视图中做的话。
press: [controller.pressItem, controller]
2.from pressItem,获取您的应用程序并使用 to 方法。
var app = sap.ui.getCore().byId("splitApp");
app.to(id, "slide", data)
其中 id - 是您的详细信息页面的 ID,data 是您要发送到该页面的有效负载。
备注:
1. 通过 event bus 实施也可以,并且会更好
我正在开发一个 SAPUI5 应用程序,其中包含一个带有一个 MasterPage 和许多 DeatilPages 的 SplitApp。我为 MasterPage 创建了一个 StandartListItems 列表,如果我 select 其中之一,我想显示正确的 DetailPage。但是现在我不知道如何实现它。
填写主页列表:
var oMasterPage = sap.ui.getCore().byId("masterPage");
var masterContentList = sap.ui.getCore().byId("masterList");
masterContentList.bindItems({
path : "/inhaltList",
template : new sap.m.StandardListItem({
title: "{master}"
})
});
我为每个 MasterListItem 创建一个 DetailPage 并将其添加到 SplitApp:
var detailContentList = new sap.m.List({});
detailContentList.bindItems({
path : "/inhaltList",
sorter : new sap.ui.model.Sorter("name"),
template : new sap.m.CustomListItem({
content: [
new sap.m.VBox({
width : "80%",
displayInline : false,
direction: "Column",
items:[
new sap.ui.commons.TextView({text:"titel", design:sap.ui.commons.TextViewDesign.H2}),
//new sap.ui.commons.TextView({text:"{detail>titel}", design:sap.ui.commons.TextViewDesign.H2}),
//new sap.ui.commons.TextView({text:"{detail>content>text}", design:sap.ui.commons.TextViewDesign.Small})
new sap.ui.commons.TextView({text:"textetextetextetexttextexte", design:sap.ui.commons.TextViewDesign.Small})
]
})
]
})
});
var DetailPage = new sap.m.Page({
path : "/inhaltList",
title: "{master}",
content:[
detailContentList
]
});
splitApp.addDetailPage(DetailPage);
最后,我在 SplitApp 中有一个 MasterPage,在一个案例中有 4 个 DetailPage。到此为止。
现在,我想建立从 MasterListItem 到正确的 DetailPage 的关系,以便在我为此选择 MasterListItem 时显示正确的 DetailPage。
有人知道吗?
据我了解,您有 sap.m.StandardListItem 一些项目,您希望在单击项目时切换详细信息。最简单的方法: 1. 为您的项目添加新闻事件。 controller 是一个控制器,如果你在一个视图中做的话。
press: [controller.pressItem, controller]
2.from pressItem,获取您的应用程序并使用 to 方法。
var app = sap.ui.getCore().byId("splitApp");
app.to(id, "slide", data)
其中 id - 是您的详细信息页面的 ID,data 是您要发送到该页面的有效负载。
备注: 1. 通过 event bus 实施也可以,并且会更好