如何按需切换视图

Question

<semantic:DetailPage title="Detail Page Title">
  <mvc:XMLView viewName="query.sap.view.Table" />
  <mvc:XMLView viewName="query.sap.view.chart" />
</semantic:DetailPage>

我在同一内容中有两个嵌套视图，我想只显示其中一个。当我按下按钮时，它应该切换到另一个按钮。

Answer 1

我建议添加一个视图。之后，在任何选定的活动中，您都可以使用 sap.m.semantic.SemanticPage.removeContent（vContent）删除原始视图和sap.m.semantic.SemanticPage.addContent（）以添加新视图。

Link to the relevant SAPUI5 Guide Page

希望它对你有所帮助。

Answer 2

为了只显示一个控件（在我们的例子中是其中一个子视图），我们可能首先想要实例化所有控件并使用visible属性隐藏＆＃34;不需要＆＃34;但我们应该记住，这种方法可能导致performance issue取决于这些控件的复杂性和内容量。对于诸如表和视图之类的控件尤其如此，这就是为什么我们应该实时控制 lazily 而不是一次性的所有控件。

幸运的是，UI5已经内置了延迟加载功能..

按需切换视图

通过NavContainer +路由器

相应地配置 app描述符文件（manifest.json）中的targets属性，如下所示：https://embed.plnkr.co/HRSJ44/

为此，我们需要三个属性作为子视图的目标对象：

1. parent：指向定义父视图的父目标名称
2. controlId：应附加子视图的控件的ID 在上面的Plunker示例中，控件是NavContainer，它还提供滑动动画作为奖励。可以使用transition: "show"关闭动画。
3. controlAggregation：在我们的案例中"pages"（NavContainer的默认聚合）。

在定义这三个属性后，我们可以display the target view without changing the hash，或通过调用component.getRouter().navTo("thatChildRouteName");导航到子视图。无论哪种方式，子视图都会被懒惰地创建，我们可以灵活地切换不同的子视图。

  






Via Blocks

可以懒惰地加载视图，也可以使用sap.uxap.BlockBase切换视图：

• 示例：https://embed.plnkr.co/9ZVwpP/
• 文档：
  • Creating Blocks
  • Object Page Blocks
  • API reference: sap/uxap/BaseBlock

尽管块通常在sap.uxap.ObjectPageLayout的部分中使用，但它们也可以独立使用。只需确保在引导时预加载sap.uxap及其dependent libraries。

Answer 3

让我们有一个开关并将其当前值保存到本地JSON模型。现在，我们将使用此值在2个视图之间切换。如果switch为true，则显示第一个视图，否则显示第二个开关。

以下是代码：

XML（我刚刚使用文本代替View（同样的事情））：

        <Switch state='{/showFirstView}' />
        <Text text='TExt 1' visible='{/showFirstView}' />
        <Text text='TExt 2' visible='{=!${/showFirstView}}' />

控制器：

onInit: function() {
        var model = new sap.ui.model.json.JSONModel({showFirstView:true});
        this.getView().setModel(model);
    },

它有效。截图：

和：