我喜欢在不使用 sap.m 中的 SplitApp 控件的情况下实现类似主从的 UI5 应用程序。相反，我想要一个左侧有固定内容的页面和 <NavContainer>在右侧。基于 URL(路由器)我喜欢更改 <NavContainer> 的内容仅 - 不是整个页面。
到目前为止，我的初始页面呈现正确。但是如果我将 URL 更改为 #trans 整个页面更改为我的 previewTransaction.view.xml ，不仅仅是<NavContainer>部分。
怎么了？
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<title>Hello UI5!</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5beta.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-frameOptions='allow'
>
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.require([], function () {
var app = new sap.m.App("appId");
appGlobals.app = app;
var rootView = new sap.ui.view({id: "mainId", viewName: "./appRoot", type: sap.ui.core.mvc.ViewType.XML});
app.addPage(rootView); // app contains views
app.placeAt("content");
// setup router
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
jQuery.sap.require("./routes"); // load ./routes.js
var router = new sap.ui.core.routing.Router(myroutes, myRoutesDefaultSettings, null, myTargetsConfig); // myroutes defined in routes.js
router.initialize();
});
});
</script>
</head>
<body class='sapUiBody' id="content">
</body>
</html>
appRoot.view.xml:
<mvc:View xmlns="sap.m" xmlns:l="sap.ui.layout">
<Page>
<content>
<l:VerticalLayout id="containerLayout" width="100%" height="100%">
<l:BlockLayout id="BlockLayout">
<l:BlockLayoutRow>
<l:BlockLayoutCell>
<!-- 'Master' -->
<mvc:XMLView viewName="xx.views.SearchControlPanel"></mvc:XMLView>
</l:BlockLayoutCell>
<l:BlockLayoutCell width="3">
<!-- 'Detail' -->
<NavContainer id="nc_previewContent" height="100%" navigate="nc_Nav">
<mvc:XMLView viewName="./preview"></mvc:XMLView>
</NavContainer>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
</l:BlockLayout>
</l:VerticalLayout>
</content>
</Page>
</mvc:View>
routes.js:
var myRoutesDefaultSettings = {
viewType: "XML",
clearTarget: true
};
var myroutes = [
{
name: "main",
pattern: "",
target: "welcome"
},
{
name: "transactions",
pattern: "trans", // handle #trans URL endings
target: "transactions"
}
];
var myTargetsConfig = {
welcome: {
viewName: "./appRoot",
controlId: "appId",
controlAggregation: "pages",
clearAggregation: false
},
transactions: {
viewName: "./previewTransactions",
controlId: "nc_previewContent", // id of NavContainer in ppRoot.view.xml
controlAggregation: "pages", // aggregation of a NavContainer is named 'pages'
clearAggregation: false
}
};
最佳答案
问题出在路由器 (routes.js) 中定义的 id - controlId:"nc_previewContent"。由于 NavContainer 位于 appRoot View 中(其 id 为 -main)，因此 NavContainer 的正确 id 将为(因为 XML View 中的控件 Id 以 View Id 为前缀):
controlId: "mainId--nc_previewContent"
我将您的代码更改为上述 Id，还进行了以下更改:
- 将路由器中controlId的id更改为:
mainId--nc_previewContent - 将路由器从
sap.ui.core.routing.Router更改为sap.m.routing.Router
它按预期工作(仅 NavContainer 发生变化)。代码如下:
index.html
<script>
sap.ui.localResources("/");
sap.ui.getCore().attachInit(function () {
sap.ui.require([], function () {
var app = new sap.m.App("appId");
//appGlobals.app = app;
var rootView = new sap.ui.view({id: "mainId", viewName: "com.sap.appRoot", type: sap.ui.core.mvc.ViewType.XML});
app.addPage(rootView); // app contains views
app.placeAt("content");
// setup router
jQuery.sap.require("sap.m.routing.Router");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
jQuery.sap.require("com.sap.routes"); // load ./routes.js
var router = new sap.m.routing.Router(myroutes, myRoutesDefaultSettings, null, myTargetsConfig); // myroutes defined in routes.js
router.initialize();
});
});
</script>
routes.js
var myroutes = [
{
name: "main",
pattern: "",
target: "welcome"
},
{
name: "second",
pattern: "second", // handle #trans URL endings
target: "second"
}
];
var myTargetsConfig = {
welcome: {
viewName: "com.sap.viewRight",
controlId: "mainId--nc_previewContent",
controlAggregation: "pages",
clearAggregation: false
},
second: {
viewName: "com.sap.viewRight2",
controlId: "mainId--nc_previewContent", // id of NavContainer in ppRoot.view.xml
controlAggregation: "pages", // aggregation of a NavContainer is named 'pages'
clearAggregation: false
}
};
如果您需要更多信息，请告诉我。
关于javascript - openui5/sapui5 : Change parts of a page controlled by router，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35265200/