openui5 / sapui5：更改由路由器控制的页面部分

Question

我喜欢在不使用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
    }

};

Answer 1

问题出在路由器（routes.js）中定义的ID- controlId:"nc_previewContent" 。 由于NavContainer位于appRoot视图（其id为-main）内，因此NavContainer的正确ID为（因为XML视图中的控件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
    }

};

让我知道您是否需要其他信息。

openui5 / sapui5：更改由路由器控制的页面部分

问题描述

1 个解决方案

解决方案1
0 2016-12-28 15:42:45

openui5 / sapui5：更改由路由器控制的页面部分

问题描述

1 个解决方案

解决方案1 0 2016-12-28 15:42:45

解决方案1
0 2016-12-28 15:42:45