个人中心
gpt4 book ai didi

javascript - openui5/sapui5 : Change parts of a page controlled by router

转载 作者：行者123 更新时间：2023-11-28 06:24:13 25 4
gpt4 key购买 nike

我喜欢在不使用 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，还进行了以下更改:

  1. 将路由器中controlId的id更改为:mainId--nc_previewContent
  2. 将路由器从 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/

25 4 0
文章推荐： javascript - 如何修复 Wkhtmltopdf 不正确的页数
文章推荐： javascript - 使用不同的数据加载 Handlebars js 部分
文章推荐： javascript - 在 Angular js文件中获取未定义的php值
文章推荐： javascript - iOS Firefox XMLHttpRequest 错误响应
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com