Emberjs: add routes after application initialization ()

I ran into the following problem when creating a router based application with emberjs. My application is simplified, structured as follows:

var App = Em.Application.create({});

App.ApplicationController   = Em.Controller.extend({});

App.ApplicationView = Em.View.extend({

    template    : Em.Handlebars.compile('APPLICATION TEMPLATE')

});


App.RootState   = Em.Route.extend({

    index   : Em.Route.extend({
        route   : "/"
    })

})

App.Router  = Em.Router.extend({

    root    : App.RootState

});

    // initialize the app here
App.initialize();

// extend the RootState from anywhere. eg. from a plugged widget 
App.RootState.reopen({

    login   : Em.Route.extend({
        route   : "/state1"
    })

});

//App.initialize(); //init the app a second time forces unexpected behaviour 

App.RootState.reopen({

    alarms  : Em.Route.extend({
        route   : "/state2"
    })

});

//App.initialize();

As shown in my application, I am trying to extend the router with new routes at runtime. I know that there is another topic with a similar question, but the example being discussed does not work for me. How can I extend the router at runtime with additional routes without calling initialize () after each ... reopen ({}).

The background for this is to determine at runtime what the application looks like, for example, to connect different wigets with their own routes.

Regards, T