ember.js widgets

Question

I know that ember js is good for single page apps and it appears that you can localize ember js app to a single dom container rather than the whole page, so I'm wondering if ember js would be a good fit for advanced widget creation, not just a slightly fancy drop down or anything but a more complex widget which may deal with its own restful resource etc. Or is using ember.js in this way overkill?

If it is suitable for widgets, would it be possible without having to recode the widgets to use multiple ember widget apps on the same page when the ember apps have come from different authors, an example of what I mean is that I can easily have multple jquery plugins from different sources on the same page without any conflicts.

Answer 1

Ember.js would not be overkill for complex widgets and it's completely possible to use multiple ember widget apps on a single page. However, there will need to be a little code modification. From the Ember.js code:

"By default, Ember.Application will begin listening for events on the document. If your application is embedded inside a page, instead of controlling the entire document, you can specify which DOM element to attach to by setting the rootElement property:

    MyApp = Ember.Application.create({
      rootElement: $('#my-app')
    });

The root of an Ember.Application must not be removed during the course of the page's lifetime. If you have only a single conceptual application for the entire page, and are not embedding any third-party Ember applications in your page, use the default document root for your application.

You only need to specify the root if your page contains multiple instances of Ember.Application."

Now the obvious issue would be how to set rootElement for each of these widgets before it's JavaScript is loaded. I can think of a number of ways of doing this but the best way depends on the setup of whatever you're trying to do. Hopefully this puts you on the correct path.