Dinamic load Routes, Controllers, templates and etc

Design
1

Hello! I want split all classes(Controllers, Views, Routes, Models) and templates to differents files with this architecture:

  • app
    • controllers
    • models
    • templates
    • views
    • routes …

My problem - Ember create Route object automatically after change url. I need load dynamically current classes(Route, Controller, Views, templates) before create it. I need “hook” - after change url and before create Route. Thanks.

2

This is how I dynamically load handlebars templates. Not sure I will keep this in a production environment. Most probably, I will compile the templates in such a case.

Make sure template structure on disk is created exactly as expected by Ember !

App = Ember.Application.create({
   
  resolver: Ember.DefaultResolver.extend({
    //Get hbs templates when needed
    //If template is included in index.html, this one will be used
    //otherwise, the template will be loaded from disk 
    resolveTemplate: function (parsedName) {
      var template = this._super(parsedName);
      var templateName = parsedName.fullNameWithoutType.replace(/\./g, '/');
      if (!template) {
        var filePath = '/scripts/templates/' + templateName + '.hbs';

        console.log("Loading .hbs template: " + filePath);
    
        $.ajax({
          url: filePath,
          async: false,
          success: function (response) {
            template = Ember.Handlebars.compile(response);
          }
        });
      }
      return template;
    }
  })
});
3

Take a look at this Ember async router: load code async with extra routes

now you can do something like this:

    beforeModel: function (transition) {
      var reRegisterSafetyRoundRoutes = !EEPD.SafetyRoundEvaluationRoute,
        self = this;

    return $.when(
        !$.fn.datepicker ? window.downLoadCssPromise(window.bundleUrls.css.bootstrapControls) : $.Deferred().resolve(), //load bootstrap css
        !$.fn.datepicker ? window.downloadJSPromise(window.bundleUrls.js.bootstrapControls) : $.Deferred().resolve(), //load bootstrap js           
        !EEPD.SafetyRoundEvaluationRoute ? window.downloadJSPromise(window.bundleUrls.js.safetyroundroute) : $.Deferred().resolve(), //load the routes!
        !EEPD.SafetyRoundMeasure ? window.downLoadCssPromise(window.bundleUrls.css.safetyround) : $.Deferred().resolve(), //load css
        !EEPD.SafetyRoundMeasure ? window.downloadJSPromise(window.bundleUrls.js.safetyround) : $.Deferred().resolve() //load models, controllers, views and compiled handlebars
    ).then(function () {
        if (reRegisterSafetyRoundRoutes) {
            return self.reRegisterRoutes(transition, "EEPD", "SafetyRound"); //register the routes from the loaded modules (dummies have been generated by Ember) and retry the transaction
        }
    });
},