<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)。 –