How should I structure multiple instances of the same Ember.Application sub-class on the same page?

Question

I have a reasonably large Ember.Application ("MyApp"). I wrote it as a standalone ember-controlled page, but now I want to instantiate N-instances of the application hosted inside an existing (non-ember) page.

Ember docs on Ember.Application suggest that the app should be both the class namespace AND the root of a singleton-instance, but in this case, I need one class namespace, and multiple instances. I don't want to load the classes separately per instance, they are actually fairly large and mobile is a major use-case.

Currently I have:

MyApp = Ember.Application.create({ /* app state */); // namespace & instance
MyApp.SomeSupportingClass1 = ...

My impulse is to do:

MyApp = Ember.Object.create(); // namespace
MyApp.MyApp = Ember.Application.extend({ /* app state */ }); // instance class
MyApp.myAppInstances = Ember.ArrayController.create(); // instances of MyApp.MyApp
MyApp.SomeSupportingClass1 = ...

Will this cause problems? Is there a more 'ember-y' way to structure this?

Answer 1

Currently, I believe your only option is "Ember Islands".

However, Godfrey the newest addition to Tilde, inc (Where Tom and Yehuda work), has been doing some work on FastBoot which will include "Application Instances". Once Godfrey's work lands in Ember you will have an official ember way of accomplishing this.

Update: It's also worth taking a look at [Ember Engines] as a way to bring multiple applications together.(http://ember-engines.com/)