DevExtreme Remove Specific View from Cache

I wanted to remove a specific view from the DevExtreme View Cache, but examples were not pointing the correct way.

I have a view named "showAccountInfo" and when I tried to remove it, I would get an error that it was not found.  I found the view name was actually "home_1_showAccountInfo" and was due to the fact that I performed an app.navigate({ view: 'showAccountInfo' }) to that view because I did not have it in the core menu items.

Here are the steps I took to get the correct name and remove a specific DevExtreme View from the Cache.

1. Capture View Name: 

  • Capture the view name in the model binding.  
  • Add the "viewInfo" parameter to the view function.
  • Add the viewInfo.key to a Global Var
Account.showAccountInfo = function (params, viewInfo) {
   var viewModel = {
        viewShown: function (e) {
            pageAcctInit(viewInfo.key);
        }
    };
    return viewModel;
};

//---------------------------------------------------
//Set a global var with the view key.
//---------------------------------------------------
function pageAcctInit(viewKey)
{
    _ViewKeyAcctInfo = viewKey;
}

2. Remove View from Cache: In my case when the user navigated back to the home page, and then back to the "Account Info" I will remove the view from the cache before I navigate.

//Remove the view from the cache
if (_ViewKeyAcctInfo != undefined) removeViewFromCache(_ViewKeyAcctInfo);
       
//Navigate to un-cached view!
Account_Inquiry.app.navigate({ view: 'showAccountInfo' });