emberjs: add routes after app initialize()

Question

i run into the following problem when building a router based app with emberjs. My app is simplified structured as following:

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();

Like my app demonstrates, i try to extend the router with new routes at runtime. I know that there exists another thread with similar question exists, but the discussed example do not work for me. How can i extend my router at runtime with additional routes, without calling initialize() after every ...reopen({ }).

The background for doing this is to decide at runtime how the application is look like, for example to plug in different wigets with their own routes.

Regards, T