Ember nested applications and widgets

Question

I'm designing the intranet web application for our company. One of the app. requirements is to provide "widget" platform. Which means that developers may create mini application, that will work inside the main web application and can use it's resources. Widgets could be independent of applications and they can have there own data models and behaviors. My task is to provide widget abstraction and widgets engine within application (widgets management and organizing on the application pages). I reviewed several JS "MV*" frameworks and it looks like Ember.js is the thing that I want to use. But I can't understand how to separate in Ember, the abstract functionality between widgets and the application. From one side, the main application is Ember application by itself that manages current widgets appearance, from other, widgets, are applications to. Is it possible to have nested apps in Ember, so can make something like:

Widgets.SpecificWidget1 = Em.Application.extend({
   name:"I'm custom widget",
   ready:function(){alert('Widget app Ready')}
});

App = Em.Application.create({
   rootElement:"#widgetsPanel",
   ready:function(){alert('main app Ready')}
});

App.WidgetsController = Em.ArrayController.create({
   widgets:[Widgets.SpecificWidget1.create(),
            Widgets.SpecificWidget1.create(),
            Widgets.SpecificWidget1.create()]
});

App.WidgetsView = Em.View.extend({

});

<div id="widgetsPanel"></div>

<script type="text/x-handelbars">
<ul>
{{#each App.WidgetsController}}
  {{#view App.WidgetsView contentBinding="this"}}
    <li>{{content.name}}</li>
  {{/view}}
{{/each}}
</ul>
</script>

If this way is not correct to do this, can you please tell what is the better way to do it?Thx

Answer 1

It's hard to tell what's happening in the code, but this is my best guess of what you're trying to do. This isn't designed to work as is, but it should put you on the path to what you want to do:

Widgets.SpecificWidget1 = Em.Object.extend({
   name:"I'm custom widget",
   ready:function(){alert('Widget app Ready')}
});

Assuming this is supposed to be the base model you're working from, the Widget is extending Ember.Object, as that's a tangible thing. As far as I can tell, there's not much to be gained from extending Ember.Application in most use cases, and in a basic scenario where your Ember Application is an entire page, you'll never want more than one.

App = Em.Application.create({
   rootElement:"#widgetsPanel",
   ready:function(){alert('main app Ready')}
});

App.WidgetsController = Em.ArrayController.create({
   widgets : [Widgets.SpecificWidget1.create(),
              Widgets.SpecificWidget1.create(),
              Widgets.SpecificWidget1.create()]
});

As far as I can tell this is okay.

App.WidgetsView = Em.View.extend({

});

You don't really gain anything from this by itself. If you give it a 'templateName' attribute, you can bind it to a particular template defined in Handlebars to get some functionality, and wrap the general Widget to get a better MVC setup going. But for what you have, you could remove this.

For what I'm working on at the moment, I have a design setup that looks like this Fiddle: http://jsfiddle.net/PastryExplosion/99CMD/