sapui5 选择了错误的路由名称
sapui5 incorrect route name is selected
基本上,我从 sap 演示应用程序中复制了所有内容,https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/tdg/index.html?responderOn=true
我想做的是:
在母版页中,我添加了一个按钮来触发导航。
我添加了新页面,按下该按钮时,新视图应显示在详细信息页面中。
问题是:
按下按钮时,将调用我的事件处理程序,这将触发导航。在 routepatternmatched 事件处理程序中,我得到了路由名称“product”。但它应该是“detail1”。在我的代码中它就像 navTo("detail1"),这里有什么问题?当然我的detail1视图并没有显示在详情页中。
routing : {
config : {
routerClass : com.pdh.MyRouter,
viewType : "XML",
viewPath : "com.pdh.view",
targetAggregation : "detailPages",
clearTarget : false
},
routes : [
{
pattern : "",
name : "main",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControl",
subroutes : [
{
pattern : "{product}/:tab:",
name : "product",
view : "Detail"
}
]
},{
pattern : "detail1",
name : "detail1",
view : "Detail1",
targetAggregation : "detailPages",
targetControl : "idAppControl"
},
{
name : "catchallMaster",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControl",
subroutes : [
{
pattern : ":all*:",
name : "catchallDetail",
view : "NotFound",
transition : "show"
}
]
}
]
}
添加按钮的主视图
<mvc:View controllerName="com.pdh.view.Master"
displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="page" title="{i18n>masterTitle}">
<subHeader>
<Bar id="searchBar">
<contentMiddle>
<!-- <SearchField id="searchField" showRefreshButton="{device>/isNoTouch}"
search="onSearch" tooltip="{i18n>masterSearchTooltip}" width="100%"> </SearchField> -->
</contentMiddle>
</Bar>
</subHeader>
<content>
<Button xmlns="sap.m" busy="false" busyIndicatorDelay="1000"
visible="true" text="Jun" type="Default" width="" enabled="true"
icon="" iconFirst="true" activeIcon="" iconDensityAware="true"
ariaDescribedBy="" ariaLabelledBy="" tap="" press="junNav">
<tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
<dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
</Button>
<!-- <List id="list" items="{/}" mode="{device>/listMode}"
noDataText="{i18n>masterListNoDataText}" select="onSelect" growing="true"
growingScrollToLoad="true">
<items>
<ObjectListItem type="{device>/listItemType}" press="onSelect"
title="{product_cd}">
</ObjectListItem>
</items>
</List> -->
</content>
<footer>
<Bar>
<contentRight>
<Button icon="sap-icon://add" tooltip="{i18n>masterFooterAddButtonTooltip}"
press="onAddProduct" />
</contentRight>
</Bar>
</footer>
</Page>
</mvc:View>
控制器中的事件处理程序:
junNav : function() {
// This is only relevant when running on phone devices
console.log("junNav");
this.getRouter().navTo("detail1",null,true);
},
routepatternmatched 事件的事件处理程序:
onRouteMatched : function(oEvent) {
var sName = oEvent.getParameter("name");
console.log("master controller onRouteMatched "+sName);
if (sName !== "main") {
return;
}
//Load the detail view in desktop
this.getRouter().myNavToWithoutHash({
currentView : this.getView(),
targetViewName : "com.pdh.view.Detail",
targetViewType : "XML"
});
//Wait for the list to be loaded once
this.waitForInitialListLoading(function () {
//On the empty hash select the first item
this.selectFirstItem();
});
},
当您使用路由时,路由的顺序很重要。
只有与模式匹配的第一条路线才会触发事件。
yout route product 的模式与 detail1 匹配
自 {product}/:tab:
将产生详细信息/(无制表符)
如果您将此模式更改为 Products/{product}:tab
detail1 将不再匹配
Products/detail1 将匹配。
此致,
托拜厄斯
基本上,我从 sap 演示应用程序中复制了所有内容,https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/tdg/index.html?responderOn=true
我想做的是:
在母版页中,我添加了一个按钮来触发导航。
我添加了新页面,按下该按钮时,新视图应显示在详细信息页面中。
routing : {
config : {
routerClass : com.pdh.MyRouter,
viewType : "XML",
viewPath : "com.pdh.view",
targetAggregation : "detailPages",
clearTarget : false
},
routes : [
{
pattern : "",
name : "main",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControl",
subroutes : [
{
pattern : "{product}/:tab:",
name : "product",
view : "Detail"
}
]
},{
pattern : "detail1",
name : "detail1",
view : "Detail1",
targetAggregation : "detailPages",
targetControl : "idAppControl"
},
{
name : "catchallMaster",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControl",
subroutes : [
{
pattern : ":all*:",
name : "catchallDetail",
view : "NotFound",
transition : "show"
}
]
}
]
}
添加按钮的主视图
<mvc:View controllerName="com.pdh.view.Master"
displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page id="page" title="{i18n>masterTitle}">
<subHeader>
<Bar id="searchBar">
<contentMiddle>
<!-- <SearchField id="searchField" showRefreshButton="{device>/isNoTouch}"
search="onSearch" tooltip="{i18n>masterSearchTooltip}" width="100%"> </SearchField> -->
</contentMiddle>
</Bar>
</subHeader>
<content>
<Button xmlns="sap.m" busy="false" busyIndicatorDelay="1000"
visible="true" text="Jun" type="Default" width="" enabled="true"
icon="" iconFirst="true" activeIcon="" iconDensityAware="true"
ariaDescribedBy="" ariaLabelledBy="" tap="" press="junNav">
<tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
<dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
</Button>
<!-- <List id="list" items="{/}" mode="{device>/listMode}"
noDataText="{i18n>masterListNoDataText}" select="onSelect" growing="true"
growingScrollToLoad="true">
<items>
<ObjectListItem type="{device>/listItemType}" press="onSelect"
title="{product_cd}">
</ObjectListItem>
</items>
</List> -->
</content>
<footer>
<Bar>
<contentRight>
<Button icon="sap-icon://add" tooltip="{i18n>masterFooterAddButtonTooltip}"
press="onAddProduct" />
</contentRight>
</Bar>
</footer>
</Page>
</mvc:View>
控制器中的事件处理程序:
junNav : function() {
// This is only relevant when running on phone devices
console.log("junNav");
this.getRouter().navTo("detail1",null,true);
},
routepatternmatched 事件的事件处理程序:
onRouteMatched : function(oEvent) {
var sName = oEvent.getParameter("name");
console.log("master controller onRouteMatched "+sName);
if (sName !== "main") {
return;
}
//Load the detail view in desktop
this.getRouter().myNavToWithoutHash({
currentView : this.getView(),
targetViewName : "com.pdh.view.Detail",
targetViewType : "XML"
});
//Wait for the list to be loaded once
this.waitForInitialListLoading(function () {
//On the empty hash select the first item
this.selectFirstItem();
});
},
当您使用路由时,路由的顺序很重要。 只有与模式匹配的第一条路线才会触发事件。 yout route product 的模式与 detail1 匹配 自 {product}/:tab: 将产生详细信息/(无制表符)
如果您将此模式更改为 Products/{product}:tab detail1 将不再匹配 Products/detail1 将匹配。
此致, 托拜厄斯