UI5 Router destroying cached views

Question

I have a Master Details Page App where we configured the Router for the same to navigate between pages.

App.view.xml

<SplitApp id="rootControl" detailNavigate="onDetailNavigation">
</SplitApp>

manifest.json

"routing": {
                "config": {
                    "routerClass": "sap.m.routing.Router",
                    "viewPath": "master",
                    "controlId": "rootControl",
                    "viewType": "XML",
                    "async":"true"
                },
                "routes": [
                    {
                        ....
                    },
                    ...
                "targets": {}
                   ...

App is simple Employee CRUD app, i have configured the router with 2 routes 1 for Create/Edit and another one for Dispaly

I need to destroy the view if i navigate from one view to another view, like on start of the page show the Master Page with all the employees and detail page show display view of the employee1.

i have Edit button on the Display view, on press i navigate details page from Display view to Edit View, on this point i need to destroy the Display view from the router, which is cached.

How to achive this? or do i need to take different approch to solve the cacheing? or I should not think of Memory

tried calling destroy onDetailNavigate of SplitApp

onDetailNavigation : function(oEvent){
            console.log("Split app onDetailNavigation");
            oEvent.getParameter('from').destroy();
        }

Which gives Error next time go back to same view again

Error: The object with ID __xmlview4 was destroyed and cannot be used anymore.

Answer 1

According to the comments you destroy views to save the memory allocated by your two views. I do not think this brings any real benefit. There are three possible solutions:

• Stick with the current solution.
• Use a single view and switch between a display and a edit fragment. An example can be found here.
• Use a single view with a form with input fields. Bind the editable attribute against a model (e.g. view model) property reflecting edit or display state of the whole form or per property.

<Input value="{applicationModel>/propertyName}" editable="{viewModel>/editable}"/>

I'm using a version of the third solution. My application model (extending JSONModel) holds the application data plus a state controlling the property. The controller just calls setEditable on the application model which computes the state. Using this approach I avoid to spread the logic accross to many parts of the application.

<Input value="{applicationModel>/propertyName}" editable="{applicationModel>/Attributes/propertyName/editable}"/>

Answer 2

Since my Question is about the destroying the view from Router which are cached, i have followed the @boghyon comment and made some changes in my code as below which removes the pages after navigation of detail page as below

var splitApp = this.getView().byId('rootControl'); 
splitApp.removeDetailPage(oEvent.getParameter('from')); 

and to remove the cached view from router i have wrote some logic

var router = this.getOwnerComponent().getRouter(); 
for(var view in router._oViews._oViews){
if( router._oViews._oViews[view].sId === oEvent.getParameter('fromId'){ 
 delete router._oViews._oViews[view]; 
 } 
}

Which destroy the view.

By doing this which loads the views multiple times and this is not proper ways for my requirement we have follow the @matbtt answer.

Thank you both for the valueable input.