灰烬嵌套的应用程序和小部件

Question

我正在为我们的公司设计Intranet Web应用程序。 应用之一。 要求是提供“小部件”平台。 这意味着开发人员可以创建迷你应用程序，该应用程序可以在主Web应用程序内部运行并可以使用其资源。 小部件可以独立于应用程序，并且可以具有自己的数据模型和行为。 我的任务是在应用程序中提供小部件抽象和小部件引擎（小部件管理和在应用程序页面上进行组织）。 我回顾了几个JS“ MV *”框架，看起来Ember.js是我要使用的东西。 但是我不明白如何在Ember中分离小部件和应用程序之间的抽象功能。 从一方面来看，主要应用程序是Ember应用程序，它本身管理着当前小部件的外观，而其他应用程序则是该部件。 是否可以在Ember中嵌套应用程序，所以可以进行如下操作：

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>

如果这样做的方法不正确，可以请您告诉我哪种方法更好吗？

Answer 1

很难说出代码中正在发生什么，但这是我对您要尝试执行的操作的最佳猜测。 这并不是按原样设计的，但是它应该使您走上想要做的事情：

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

假设这是您正在使用的基本模型，则该Widget扩展了Ember.Object，因为这是有形的。 据我所知，在大多数用例中，扩展Ember.Application并不会带来太多好处，在Ember Application是整个页面的基本情况下，您永远都不会想要超过一个。

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({

});

您本身并不能从中真正获得任何收益。 如果为它提供了'templateName'属性，则可以将其绑定到在Handlebars中定义的特定模板以获取某些功能，并包装常规Widget以获得更好的MVC设置。 但是对于您所拥有的，您可以删除它。

对于目前的工作，我有一个类似于Fiddle的设计设置： http : //jsfiddle.net/PastryExplosion/99CMD/