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?

I don't have fiddle. I have built the app using Ember - Cli not using Ember JS. — radcliff
I have two ember builds. I want to load both the app into the same page. — radcliff
Your code almost right so make you sure that id is unique in page. — Sunny
If I load app1 on page load and app2 on window on load it works fine — radcliff

Andrey Mikhaylov - lolmaus Andrey Mikhaylov - lolmaus · Accepted Answer · 2015-06-10T15:06:28

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.

Embedding two Ember Cli App Instances in the same page

1 Answers