Ember async router: loads async code with additional routes

Question

In the new asynchronous router, you can reload the additional code.

App.ArticlesRoute = Ember.Route.extend({ beforeModel: function() { if (!App.Article) { return $.getScript('/articles_code.js'); } } }); 

but what if the asynchronous code contains additional routes? Amber will create them. But I need those from asynchronous code, not the ones that were created and registered by Ember.

I came up with the following solution (but I don't like it):

 App.ArticlesRoute = Ember.Route.extend({ beforeModel: function(transition) { if (!App.Article) { var self = this; return $.getScript('/articles_code.js') .then(function () { return self.reRegisterRoutes(transition, "App", "Article"); //register the routes (with naming convention App.Article__________Route) from the loaded modules (dummies have been generated by Ember) and retry the transaction }); } }, reRegisterRoutes: function (transition, namespaceName, nameStartsWith) { this.container.lookup('route:loading').teardownTopLevelView(); //teardown loading view var self = this; for (var prop in Ember.Namespace.byName(namespaceName).getOwnProperties()) { //[getOwnProperties](https://gist.github.com/adjohu/1817543) if (new RegExp(nameStartsWith + '.+Route', 'i').test(prop)) { this.reRegisterRoute(prop.replace(/Route$/, "").camelize()); } } this.router.router.currentParams = transition.params; //set the parameters of the transition to the currentParams of the router return transition.retry(); //retry transaction }, reRegisterRoute: function (routeName) { var route = this.container.cache.dict['route:' + routeName]; if (route != undefined) { route.destroy(); //destroy generated route delete this.container.cache.dict['route:' + routeName]; //GC route = this.container.lookup('route:' + routeName); //register the async loaded route route.routeName = routeName; //set the routeName } } }); 

any suggestions?

UPDATE @ darshan-sawardekar

I tried your solution, ending with:

 EEPD.RouteMapper.map(function () { this.route('home', { path: '/' }); this.route('logout'); this.route('login'); this.resource('ccpr', function () { //ALL NEEDED FOR THE MENU TO WORK this.resource('ccprPatients', { path: '/' }, function () { this.route('search'); }); this.resource('ccprCardioArticles', { path: "/cardioarticles" }); this.resource('ccprCardiologists', { path: "/cardiologists" }); this.resource('ccprInfoSession', { path: "/infosession" }, function () { this.route('index'); }); this.resource('ccprPatientPresence', { path: "/patientpresence" }, function () { }); this.resource('ccprPresenceOverview', { path: "/presenceoverview" }); this.resource('ccprNextNutritionalAdvices', { path: "/nextnutritionaladvices" }); this.resource('ccprParameter', { path: "/parameter" }); this.resource('ccprListStaff', { path: "/liststaff" }); }); }); 

then in a shared download file

 EEPD.RouteMapper.map(function () { this.resource('ccpr', function () { this.resource('ccprPatients', { path: '/' }, function () { this.route('search'); }); this.resource('ccprPatient', { path: '/:ccpr_patient_id' }, function () { this.resource('ccprPracticeSessions', { path: '/practicesessions' }, function () { }); this.resource('ccprPracticeSession', { path: '/practicesessions/:ccpr_practiceSession_id' }, function () { this.route('info'); this.route('anamnese'); this.route('medication'); this.route('trainingModel', { path: '/trainingmodel' }); this.route('socialEvaluation', { path: '/socialevaluation' }); this.route('medicalFollowUp', { path: '/medicalfollowup' }); this.resource('ccprPracticeSessionPsychologicalEvaluation', { path: '/psychologicalevaluation' }, function () { this.resource('ccprPracticeSessionPsychologicalEvaluationMnhds', { path: '/mnhd' }); this.resource('ccprPracticeSessionPsychologicalEvaluationMnhd', { path: '/mnhd/:ebed_questionaire_id' }); this.resource('ccprPracticeSessionPsychologicalEvaluationHadss', { path: '/hads' }); this.resource('ccprPracticeSessionPsychologicalEvaluationHads', { path: '/hads/:ebed_questionaire_id' }); this.resource('ccprPracticeSessionPsychologicalEvaluationDs14s', { path: '/ds14' }); this.resource('ccprPracticeSessionPsychologicalEvaluationDs14', { path: '/ds14/:ebed_questionaire_id' }); }); this.resource('ccprPracticeSessionNutritionalAdvice', { path: '/nutritionaladvice' }, function () { this.resource('ccprPracticeSessionNutritionalAdviceBmi', { path: '/bmi/:ebed_nutritionBmi_id' }); this.resource('ccprPracticeSessionNutritionalAdviceDietContact', { path: '/dietcontact/:ebed_dietContact_id' }); }); this.route('decision', { path: '/decision' }); this.resource('ccprPracticeSessionApprovals', { path: '/approvals' }, function () { this.resource('ccprPracticeSessionApproval', { path: '/:erevalidatie_approval_id' }); }); }); }); this.resource('ccprCardioArticles', { path: "/cardioarticles" }); this.resource('ccprCardiologists', { path: "/cardiologists" }); this.resource('ccprInfoSession', { path: "/infosession" }, function () { this.route('addPatient'); }); this.resource('ccprPatientPresence', { path: "/patientpresence" }, function () { this.route('index'); this.route('addPatient'); }); this.resource('ccprPresenceOverview', { path: "/presenceoverview" }); this.resource('ccprNextNutritionalAdvices', { path: "/nextnutritionaladvices" }); this.resource('ccprParameter', { path: "/parameter" }); this.resource('ccprListStaff', { path: "/liststaff" }); }); }, true); 

It does not work , only if I combine it with my solution, it works partially. I got errors like Assertion failed: route ccprPracticeSession.info not found and unclean error: no route ccprPracticeSession.info.index

Answer 1

You can save all route maps to another object, and then call Router.map , iterating over the maps. Sort of,

 App.RouteMapper = Ember.Object.extend({ }); App.RouteMapper.reopenClass({ maps: null, map: function(callback, reassign) { if (!this.maps) this.maps = new Array(); this.maps.push(callback); if (reassign) { this.assign(); } }, assign: function() { var self = this; App.Router.map(function() { var routerScope = this; self.maps.forEach(function(map) { map.call(routerScope); }); }); } }); App.RouteMapper.map(function() { this.route('lorem'); this.route('ipsum'); }); 

The loaded subcomponent code calls App.RouteMapper.map , which rebuilds the entire set of routes from the saved maps. maps are the same callbacks as for Router.map so that the api does not change.