Ember嵌套應用程序和小部件

Question

我正在爲我們公司設計Intranet Web應用程序。其中一個應用程序。要求是提供「widget」平臺。這意味着開發人員可以創建迷你應用程序，該應用程序可以在主要Web應用程序中運行，並可以使用它的資源。小部件可以獨立於應用程序，並且可以擁有自己的數據模型和行爲。我的任務是在應用程序中提供小部件抽象和小部件引擎（小部件在應用程序頁面上管理和組織）。我回顧了幾個JS「MV *」框架，它看起來像Ember.js是我想要使用的。但我無法理解如何在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> 

如果這種方式是不正確的做到這一點，你可以告訴什麼是更好的方式來做到這一點THX

Answer 1

很難說出代碼中發生了什麼，但這是我對你想要做什麼的最好猜測。這不是設計爲是工作，但它應該把你的道路上，你想做什麼：

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

假設這應該是你從工作的基礎模型，小部件擴展Ember.Object，因爲這是一個有形的東西。據我所知，在大多數使用情況下擴展Ember.Application並沒有太多的收穫，在一個基本場景中，你的Ember應用程序是整個頁面，你永遠不會想要多於一個。

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設置。但是對於你有什麼，你可以刪除它。

對於什麼，我做什麼工作的，我有一個設計的設置，看起來像這樣小提琴：http://jsfiddle.net/PastryExplosion/99CMD/