How to create route-less substates in an ember.js 1.6.x

Question

I would like to create something like an admin sub-application that is available on every page of my existing ember 1.6.x app. It will have it's own state-machine (router) allowing it to load different controllers/templates depending on it's own state. I have seen a lot of similar discussions that revolve around having multiple state machines (routers) or extensive use of sub-routes but nothing really hit's the nail on the head.

Is there a clear way to create what is in effect two ember apps on the same page?

The sub-app does not need to actually have routes that are interpreted in the url bar. It also does not need to have it's state maintained when the parent app changes routes/states. It can be reset every time the parent app changes to a different route. What I want to avoid is repeating the same code over and over again inside multiple controllers in the parent app. I would also like to avoid polluting the application or global levels.

Below is a list of discussions that I have looked into. The closest thing that I can find that makes sense is the work on ember flows (which has not been finished yet). Or should I literally be looking into creating a new state-machine via the ember-states plugin for the sub-app?

To be clear I am not looking for someone to write the code for me. Just a discussion on how this SHOULD be done with ember 1.6.x as it is currently available.

http://discuss.emberjs.com/t/route-less-substates/2269

http://discuss.emberjs.com/t/is-there-a-reason-we-can-not-have-nested-routes/1845

Sending action to Ember.StateManager : is goToState mandatory?

https://github.com/emberjs/ember.js/issues/406

https://github.com/emberjs/ember.js/issues/4767

http://discuss.emberjs.com/t/concurrent-states-in-ember/5042

https://github.com/nathanhammond/ember-flows-generator

https://github.com/emberjs/ember.js/issues/406#issuecomment-3702356

Answer 1

You can run multiple embedded isolated Ember apps inside another Ember app.

An embedded Ember app can manipulate URL state like any other app or you can configure it to have routing states but not interact with URL.

Take a look at embedding applications documentation.

Excerpt:

App = Ember.Application.create({
  rootElement: '#app'
});

App.Router = Ember.Router.extend({
  location: 'none' // To disable manipulating URL
});

You can also share code between apps. For example to share an Ember Data model.

var MainApp     = Ember.Application.create({});
var AdminApp    = Ember.Application.create({rootElement: '#admin-container'});

AdminApp.Router = Ember.Router.extend({location: 'none'});

MainApp.User    = DS.Model.extend({});
AdminApp.User   = MainApp.User;

Answer 2

This could be what you are looking for:

https://github.com/tildeio/conductor.js