<semantic:DetailPage title="Detail Page Title">
<mvc:XMLView viewName="query.sap.view.Table"/>
<mvc:XMLView viewName="query.sap.view.chart"/>
</semantic:DetailPage>
我在同一内容中有两个嵌套视图,我只想显示其中的一个。当我按下一个按钮时,它应该切换到另一个按钮。使用嵌套视图并销毁其他人
<semantic:DetailPage title="Detail Page Title">
<mvc:XMLView viewName="query.sap.view.Table"/>
<mvc:XMLView viewName="query.sap.view.chart"/>
</semantic:DetailPage>
我在同一内容中有两个嵌套视图,我只想显示其中的一个。当我按下一个按钮时,它应该切换到另一个按钮。使用嵌套视图并销毁其他人
让我们有一个开关,并将其当前值保存到本地JSON模型。现在,我们将使用此值在2个视图之间切换。如果开关为真,则显示第一个视图,否则显示第二个开关。
下面是代码:
XML(我只是用文字代替视图(同样的事情)):
<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);
},
和:
我建议添加一个视图。稍后,在任何选定的事件中,您可以使用 sap.m.semantic.SemanticPage.removeContent(vContent)删除原始视图和sap.m.semantic.SemanticPage.addContent()以添加新视图。
Link to the relevant SAPUI5 Guide Page
希望它可以帮助你。
为了使只有一个控制可见的(在我们的例子中的子视图之一),我们可能会尝试先实例所有的控制和使用visible
属性来隐藏“不需要”的属性,但我们应该记住,这种方法可能导致performance issue取决于这些控件的复杂性和内容量。对于诸如表格和视图这样的控件尤其如此,这就是为什么我们应该实例化这样的控件懒惰地而不是一次全部实现的原因。
值得庆幸的是,UI5早已为我们的情况下,可以很容易地在应用程序描述符文件(manifest.json的)里面的targets
属性来配置一个内置的延迟加载功能。
这里只显示一个按需子视图的一个小例子:https://embed.plnkr.co/HRSJ44/
对于这一点,我们需要一个子视图的目标对象三个属性:
parent
:指向父视图定义的父目标名称controlId
:应该在其中附加子视图的控件的ID。 NavContainer
,它还提供了滑动动画作为奖励。动画可以用transition: "show"
关闭。controlAggregation
:在我们的案例中"pages"
(NavContainer的默认聚合)。定义这三个属性后,我们可以选择display the target view without changing the hash,或者通过调用component.getRouter().navTo("thatChildRouteName");
导航到子视图。无论哪种方式,子视图都将被懒惰地创建,我们可以灵活地切换不同的子视图。
是对嵌套视图内部或外部它这个按钮? –
尝试隐藏视图。在启动应用程序时隐藏可见的视图,并隐藏另一个应用程序。当你点击按钮隐藏当前的一个,并使可见隐藏的一个。通过这种方式或通过this.getView()。byId(“ViewId”)。setVisible(false)来设置可见性(false)。 –