Refresh all data other than session data when context changes - ember.js

Question

I'm writing a small sample application which will display some information to a user in dashboards and tables.
The application is being written using ember-cli version 0.0.37. and ember.js version 1.5.1.
I am using ember-simple-auth and ember-simple-auth-oauth2 for authentication, with a custom authenticator and authroizer to inject the client_id, client_secret and access_token into the requests where appropriate (I am fully aware that the client secret shouldn't be in a front end application, but this is a sample application for internal consumption only and not the subject of my question).
The custom authorizer also injects an o parameter into the requests, the value of which is an organisation id. The API returning data uses both the access_token and the o parameter to return data pertaining to a particular organisation. The organisation id is stored in the session.
So once I've browsed around for one organisation, I've got a dropdown component which allows me to choose another organisation. At present, this calls an action on the ApplicationRoute which updates the value in the session, and clears the store of all models that are not account or organisation, as these are used at the application level.
Code:
setSessionOrganisation: function(organisation_id) {
var self = this;
/**
* Check if its the same organisation
*/
if (this.get('session.organisation_id') == organisation_id) {
return;
}
/**
* Get the organisation for the id provided
*/
this.store.find('organisation', organisation_id).then(
function(org) {
/**
* Update the session details
*/
self.set('session.organisation_id', org.get('id'));
self.set('session.organisation_name', org.get('name'));
/**
* Get all types
*/
var store = self.container.lookup('store:main');
var types = [];
var typeMaps = store.typeMaps;
$.each(typeMaps, function(key) {
if (typeMaps.hasOwnProperty(key)) {
var type = typeMaps[key].type.typeKey;
if (type != 'account' && type != 'organisation'){
types.push(typeMaps[key].type.typeKey);
}
}
});
/**
* Clear data for types
*/
for (var i = 0; i < types.length; i++) {
store.unloadAll(types[i]);
};
});
}
I feel the code above is a bit hackish, but I've not found another way to return the model types currently in the store.
When this action is called, and the data has been flushed, I would like to then refresh/reload the current route. Some of the routes will be dynamic, and using the object ids as the dynamic segment. These routes will need to redirect to their list routes. Other routes will carry on lazily loading data when they are navigated to.
So my questions are:
Is there a better way to clear the store data than I have done above?
How can I trigger a route reload?
How can I redirect to the parent route if in a route with a dynamic segment?
As a bonus question, are there any dangers in unloading all the data for views/routes that are presently not being displayed?
Thanks!

Answer 1

I've come to a resolution that satisfies my criteria, with great help from #marcoow
As per the comments on the question, we discussed reloading the entire application to refresh the data store cache. While this approach does work, there was a flicker while the browser completely reloaded the page, and I would prefer to only reload the data and have the application sort itself out. This flicker was also present if App.reset() was called.
I explored other options and found the Ember.Route.refresh() method. This appears to cause the nested routes to reload their models when called from the application route.
In my application I have extended the store in an initializer, so that I can call a function which unloads all records from the store, for every type of model in the store, but also provide a list of model names to exclude:
app/initializers/custom-store.js:
import DS from 'ember-data';
var CustomStore = DS.Store.extend({
/**
* Extend the functionality in the store to unload all instances of each type
* of data except those passed
*
* #param {Array} exclusions List of model type names to exclude from data
* unload
*/
unloadAllExcept: function(exclusions) {
var typeMaps = this.get('typeMaps');
for (var type in typeMaps) {
if (typeMaps.hasOwnProperty(type)) {
var typeKey = (typeMaps[type].type && typeMaps[type].type.typeKey) ? typeMaps[type].type.typeKey : false;
if (typeKey && exclusions.indexOf(typeKey) === -1) {
this.unloadAll(typeKey);
}
}
}
}
});
export
default {
after: 'store',
name: 'custom-store',
initialize: function(container /*, app*/ ) {
container.unregister('store:main');
container.register('store:main', CustomStore);
}
};
This is called from app/routes/application.js in the setSessionOrganisation Action:
setSessionOrganisation: function(organisation_id) {
var _this = this;
/**
* Check if its the same organisation
*/
if (this.get('session.organisation_id') === organisation_id) {
return;
}
/**
* Get the organisation for the id provided
*/
this.store.find('organisation', organisation_id)
.then(
function(org) {
/**
* Update the session details
*/
_this.get('session')
.set('organisation_id', org.get('id'));
_this.get('session')
.set('organisation_name', org.get('name'));
/**
* Clean the local data cache of all data pertaining to
* the old organisation
*/
_this.store.unloadAllExcept(['account', 'organisation']);
/**
* refresh the application route (and subsequently all
* child routes)
*/
_this.refresh();
});
}
As a footnote, this solution does not satisfy the third question I asked, but I have realised that question is a separate issue to do with handling the response from the API, and must be dealt with during the model hook.