SAPUI5 - 标题、侧边栏和导航

Question

我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:

<mvc:View >
    <tnt:ToolPage id="toolPageId">
        <tnt:header>
            <core:Fragment ...> </core:Fragment>    
        </tnt:header>
        <tnt:sideContent id="SideContentId">
            <core:Fragment ...> </core:Fragment>
        </tnt:sideContent>
        <tnt:mainContents>
            <NavContainer id="pageContainerId" width="100%">
                <Page ...>
                    <content>
                         ...
                         ...
                    </content>
                </Page>
             </NavContainer>
        </tnt:mainContents>
    </tnt:ToolPage>
</mvc:View>

它们都与此类似，只是内容标签中的代码不同。

这样我就实现了我想要的布局，并使用 manifest.json 中的路线进行导航。我为每个页面都有一个 Controller 并使用以下方式导航:

onNavToBeTask: function(oEvent) {
        this.getRouter().navTo("pageTasklist");
}

我现在遇到的问题是，每次导航时，标题和侧边栏都会再次加载，并且侧边栏中的错误字段将突出显示。

我找到了一个示例，但这里包含 .xml 和 .js 文件中的所有代码，这非常不清楚 https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.tnt.sample.ToolPage/code

我的问题是:

• 一般来说，使用侧边栏和标题进行导航的最佳方式是什么？
• 拥有一个带有标题和侧边栏的“母版页”并将内容添加到内容标记会更好吗？
• 或者我应该只选择侧边栏中的右侧字段，并使用导航到该页面时调用的函数吗？

编辑:

Sample screenshot, what I would like to achieve

Answer 1

据我从您的帖子中了解到，您有一个主视图(母版页)，其中包含 ToolPage 和 SideNavigation。

并且您希望将 View 放入 ToolPage 的 mainContents 标记内。如果是这种情况:您不应该使用路由器。因为使用路由器，您将离开主视图。

我在这里列出了你应该做什么:

1. 将 View 创建为单独的 View 文件。 (XML 或 JS)假设您创建 View1。

2. 为菜单项的按钮单击(点击)创建事件处理程序。这应该转发到主视图的 Controller 。 (事件总线)

3. 在主视图的 Controller 中，创建一个函数来实例化 View1。实例化后，将View1添加到ToolPage的ScrollContainer(或NavContainer)的内容中。

类似这样的事情:

onGoToProductTable: function(oEvent) {
var oScrollContainer = sap.ui.getCore().byId("idScrollContainer");
var oCurrentView = oScrollContainer.getContent();
if (!oCurrentView[0]) {
        var view = sap.ui.getCore().byId("ProductTable");
        if (view === undefined) {
            view = sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                viewName: "xxx.yyy.view.ProductTable"
            });
        }
        oScrollContainer.addContent(view);
}},