sapui5 - 如何重用 SAPUI5 视图？

Question

我为一个 SAP UI5 页面创建了一个标题，现在我想在另一个页面中有一个具有几乎相同组件的类似标题。因此，为了代码重用，我尝试：

• 将标题放在单独的 UI5 视图中
• 使用 var pageHeader = sap.ui.jsview("appHeader","view.appHeader"); 创建此标头实例
• 将 pageHeader 作为内容添加到 customHeader 字段中的页面

但这不起作用，没有给出任何错误！那么是否可以通过视图重用自定义 UI 组件，如果可以，如何做到这一点？

Answer 1

This problem is probably related to the several varaints of using sap.ui.jsview:

• View definition
• View instantiation

Calling var pageHeader = sap.ui.jsview("appHeader","view.appHeader") asks the framework to look for a view with the name "view.appHeader" in your project. If there is a view with this name it will create a new instance of it and assigns it the ID "appHeader". If you use the same statement in several modules of your application you ask the framework to create an instance of the view with the same ID everytime. This will probably result in the following Error: adding element with duplicate id 'appHeader'. So when reusing a view avoid using the ID parameter in your instantiation.

One more thing you should consider when reusing a view: Since a view has a function called getControllerName which returns the name of the controller used for this view the framework will create a new instance of this controller for each view you instantiate. This is no bad behaviour but should be known to avoid problems.

At a glance:

View Definition:

sap.ui.jsview(sId, vView) // (e.g. in pageHeader view file)

View Instantiation:

sap.ui.jsview(sName) // (e.g. calling/reusing it in several files) 

In your case:

var pageHeader = sap.ui.jsview("view.appHeader") should do it.

Edit/Appendix:

Since version 1.15 of UI5 you can also use fragments as a lightweight alternative for reusing views. The documentation has some nice examples and explains the advantages of fragments and how they differ from normal views.