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>

如果这样做不正确，请告诉你最好的方法是什么？Thx

Answer 1

很难说出代码中发生了什么，但这是我对你要做的事情的最好猜测。这不是按原样设计的，但它应该让你走上你想要做的道路：

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

假设这应该是你正在使用的基本模型，Widget正在扩展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/

Ember嵌套应用程序和小部件

1 个答案: