SAPUI5-标题、侧栏和导航

我是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>

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);
}},

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

我已经找到了一个例子，但下面是一个.xml和一个.js文件中包含的所有代码，这将是非常不清楚的

我的问题是：

• 通常，使用边栏和标题导航的最佳方式是什么
• 如果有一个带有标题和侧边栏的“母版页”并且只将内容添加到内容标签中会更好吗
• 或者我应该在侧边栏中选择正确的字段，并使用导航到页面时调用的函数

编辑：

---

据我从您的帖子中了解，您有一个主视图（母版页），其中包含工具页和侧导航

您希望将视图放在ToolPage的mainContents标记中。 如果是这种情况： 你不应该使用路由器。因为使用路由器，您将离开主视图

我在此列出您应该做的事情：

将视图创建为单独的视图文件。（XML或JS）假设您创建了View1

为菜单项的按钮单击（点击）创建事件处理程序。这应该转发到主视图的控制器。（事件巴士）

在主视图的控制器中，创建一个函数来实例化View1。实例化后，将View1添加到ToolPage的ScrollContainer（或NavContainer）的内容中

大概是这样的：

<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>

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);
}},