Embedding multiple Ember application instances

I’m developing a Flash plugin drop-in replacement for a legacy application. The issue is that the Ember application may be included multiple times in same web-page (just like a Flash plugin or a Java applet).

Secondary, I would like to avoid polluting the window object as much as possible, having EmberENV or an Ember in the window object is probably OK, but the application must preserve a legacy jQuery version that is present in the page.

I created a new project: https://github.com/ludekstepan/embedding-ember

I disabled prototype extensions, the router, and defined “rootElement” link, but the two instances of the application are somehow conflicting with each other.

I’m looking into way how to modify the build process to prevent polluting the global space. Ideally I would love to build an application into one constructor function that does all the magic without polluting the global space. Example:

<div id="app1"></div>
<div id="app2"></div>

<script src="ember.js"></script>
<script src="myApp.js"></script>
    window.EmberENV = { ... } // this is OK

    MyApp.create({rootElement: "#app1"});
    MyApp.create({rootElement: "#app2"});

          .$ .... some legacy version of jQuery
          .require, .define ... undefined or not touched


Any ideas? First I would like to get my application running with multiple instances.


Any ideas how to setup the resolver to work with multiple instances? I think the Resolver stores everything in one namespace by modulePrefix. I think I need to to make it lookup static dependencies (like templates or classes) in the shared namespace and store and lookup runtime instances (like controller or application instances) in a application-instance-specific container.

I’m still investigating how to make my legacy application play nicely with Ember. If I abandon the idea to include multiple Ember Application instances in one page, is there a way how to render multiple controllers at different places in a web page? Lets say a have a following page structure:

  <div>Some legacy code here 
      {{ I want to render my ember controller here! }}
  <div>other legacy code here </div>
      {{ I want to render another ember controller here! }}

The problem is that the page structure is managed by another framework and Ember should not mangle anything else from its own elements.

I have setup a toy project in the past that loaded two ember applications onto the same page. I didn’t notice any conflicts. However, it was very simple and that could be why. I think you will have issues using an old version of jQuery though.

My suggestion would be to use iframes so that you can isolate the two apps and provide a newer version of jQuery.

The only problem i am aware of (and we also run two apps in tandem on the same page) is you can’t currently nest them, they need to be siblings. It does appear like yours are siblings, so I’m unsure what the issue is, Maybe if you post an example project that demonstrates

Was there ever a solution to nesting applications with Ember?


How can we embed an ember application in another ember application running in the same domain?

1 Like