Question

我喜欢在不使用sap.m中的SplitApp控件的情况下实现类似master-detail的UI5应用程序。相反，我希望左侧有一个固定内容的页面，右侧有一个<NavContainer>。基于URL（路由器），我想仅更改<NavContainer> 的内容 - 而不是整个页面。

到目前为止，我的初始页面呈现正确。但是，如果我将我的网址设为#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视图中的Ids控件以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 个答案: