Embedding two Ember Cli App Instances in the same page

Question

I have two ember applications build. I am trying to insert both application into the same page. First ember app is built with #app1 as rootElement. Second ember app is built with #app2 as rootElement. FYI I am building ember apps using Ember-Cli. When I load the two build into the same page. The App which is loaded last is inserted to its corresponding div.i.e.

I have two divs.

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

<script>
var app1HTML=$.ajax({url:"/embertest1/index.html",async:false}).responseText;
var app2HTML=$.ajax({url:"/embertest2/index.html",async:false}).responseText;
$("#app1").html(app1HTML);
$("#app2").html(app2HTML);
</script>

Here app2 div is loaded with corresponding ember app.

When I interchange the order.i.e.

$("#app2").html(app2HTML);
$("#app1").html(app1HTML);

Div with app1 is loaded with its ember app.

How to load both the apps at the same time?

Answer 1

Ember does not currently provide a standard way for running two or more separate apps on the same HTML document.

But fear not! This functionality is currently actively discussed and will be eventually implemented. It's called Engines.

Proposal: https://github.com/tomdale/rfcs/blob/master/active/0000-engines.md

Discussion: https://github.com/emberjs/rfcs/pull/10

Meanwhile, you could use iframes. It is the only simple solution of your task.