You cannot use the same root element (body) multiple times in an Ember.Application

Question

i'm getting error with ember 0.9.8.1

You cannot use the same root element (body) multiple times in an Ember.Application 

any idea what this is happening? some suggestions on where i should look into?

thanks.

Answer 1

You cannot bind several Ember application to the same DOM element, as it will conflict for DOM maintenance.

You nevertheless can instanciate several Ember applications in the same page. Try something like that:

App1 = Ember.Application.create({
    rootElement: '#app1'
});

App1.ApplicationController = Ember.Controller.extend();
App1.ApplicationView = Ember.View.extend({
    templateName: 'app1-view'
})

App1.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            path: '/'
        })
    })
});


App2 = Ember.Application.create({
    rootElement: '#app2'
});

App2.ApplicationController = Ember.Controller.extend();
App2.ApplicationView = Ember.View.extend({
    templateName: 'app2-view'
})

App2.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            path: '/'
        })
    })
});

Here, we explicitly set the DOM element to which the app will bind, using rootElement property.

By default, an Ember app binds to body, so if you have twice, they conflict...

Example @ http://jsfiddle.net/MikeAski/FMV8u/13/