Ember.js中的视图与组件

Question

我正在学习Ember.js，试图理解视图(view)和组件(component)之间的区别。我认为两者都可以用来创建可重用的组件。

根据Ember官网关于视图的描述： - 当需要复杂的用户事件处理时； - 当想要创建一个可重用的组件时；

根据Ember官网关于组件的描述： 组件是自定义HTML标记，您可以使用JavaScript实现其行为并使用Handlebars模板描述其外观。它们允许您创建可重用的控件，可以简化您应用程序中的模板。

那么视图和组件的主要区别是什么？在什么情况下我会更喜欢使用视图而不是组件，反之亦然？

- Bradley Trager

Answer 1

Ember.View

Ember.View 目前仅限于W3C为您创建的标记。但是，如果您想定义自己的应用程序特定的HTML标记，然后使用JavaScript实现它们的行为呢？ 实际上，使用 Ember.View 您无法做到这一点。

Ember.Component

正是组件让您做到了这一点。事实上，这是一个非常好的想法，以至于W3C目前正在制定自定义元素（Custom Elements）规范。

Ember的组件实现尽可能地接近Web组件规范。一旦浏览器广泛支持自定义元素，您就可以轻松将您的Ember组件迁移到W3C标准，并使它们可被其他框架使用，这些框架也已采用了新标准。

这对我们来说非常重要，因此我们正在与标准机构密切合作，以确保我们的组件实现与Web平台路线图相匹配。

值得注意的是，Ember.Component 实际上是 Ember.View（一个子类），但完全隔离。它模板中的属性访问将转到视图对象，并且操作也会针对视图对象进行目标定位。没有访问周围上下文或外部控制器的访问权限所有上下文信息都是通过传递的方式实现的，这在Ember.View中并非如此，因为它确实可以访问其周围的控制器，例如在视图内部，您可以执行类似this.get('controller')的操作，这将使您获得当前与视图关联的控制器。

那么视图和组件之间的主要区别是什么？

除了组件允许您创建自己的标记以及在未来某个时间点当自定义元素可用时，还能在其他支持自定义元素的框架中迁移/使用这些组件外，主要区别是根据特定的实现情况，在某个点上，Ember 组件将使视图有些过时。

那么我何时应该使用视图，何时应该使用组件？

根据上面所述，这显然取决于您的用例。但是作为一个经验法则，如果您需要在视图中访问其周围的控制器等，请使用Ember.View，但是如果您想要隔离视图并仅传递它需要工作的信息，使其与上下文无关且更加可重用，请使用Ember.Component。

希望可以帮到您。

更新

随着通往Ember 2.0之路的发布，现在鼓励您在大多数情况下使用Component而不是View。

- intuitivepixel

---

我对组件的唯一关注是它们变得复杂时。我还不知道如何将逻辑部分与渲染部分分开。在常规视图中，您有此分离，并且可以将逻辑放入控制器中，但是对于组件，我倾向于说您最终会在其中拥有非常复杂和可能混乱的问题。您是否知道是否可以为组件定义类似于控制器的专用控制器？或者组件只是不打算管理复杂的图形元素。 - sly7_7

@sly7_7，是的，我明白你的意思。但是我认为组件就像一个黑盒子，只根据传入的数据进行操作。是的，这取决于它要做什么，很快就会变得混乱不堪。有一个专门的控制器绝对是合理的，它可以将组件作为逻辑注入其中，但据我所知，组件不是Ember容器的一部分，这可能是出于设计考虑，但未来可能会改变以解决类似这样的问题。不管怎样，这是个好点子！ - intuitivepixel

任何绑定是否可以超出组件？例如，使用组件的块形式时，块中的内容元素是否可以绑定到组件的属性，还是必须在此情况下使用视图？ - Michael Johnston

啊，是的，它们可以。{{view.xxxx}}在组件中与在视图中的使用方式相同。 - Michael Johnston

Tom Dale在这个话题上的评论：http://ember.zone/the-confusion-around-ember-views-and-components/#comment-1564223692 - Akshay Rawat

Answer 2

答案很简单：使用组件。

根据2013年8月录制的培训视频，Yehuda Kats和Tom Dale（Ember核心团队成员）告诉观众除非你是框架开发人员否则不要使用视图。他们对Handlebars进行了许多增强，并引入了组件，因此不再需要使用视图。视图在内部用于支持{{#if}}和{{outlet}}等功能。

组件还紧密模仿了Web组件标准，这将构建到浏览器中，因此熟悉构建Ember组件有许多附加优势。

更新2014-11-27

现在使用组件而不是视图更加重要，因为当进入路由时，Ember 2.0将使用可路由组件，而不是控制器/视图。为了使应用程序具有未来性，最好远离视图。

来源：

• Ember 2.0之路：https://github.com/emberjs/rfcs/pull/15
• 未来证明你的Ember 1.x代码：https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
• 没有视图，只有组件（Tom Dale）：https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice?slide=27

- Johnny Oshika

---

“如果你觉得需要使用一个视图，就用组件代替”这个建议很糟糕，表明了对组件隔离性理解不足。 - jmcd

@jmcd，虽然这条评论是来自框架开发者本人，但我已将其删除。 - Johnny Oshika

我找到了来源：Gaslight视频培训，第10.3节组件问答@ 26分钟标记。汤姆说：“自从那些示例编写以来，...我们已经添加了组件，而当时这些组件并不存在。总的来说，我会说视图不是我们希望大多数开发人员编写的东西，它们更像是一个内部簿记对象。” - jmcd

@jmcd，在那个视频的26:15处，Tom说“基本上不要使用Views”。此外，如果你跳到同一视频的30分钟处，Yehuda Katz说：“View基本上是一个内部实现细节...你可以使用View，但那时你就成为了框架开发者。相反，你应该使用我们为你构建的其中一种使用View的东西，而最接近View但具有更好语义的是Component。以前你可以使用View的任何东西，Component都可以。” - Johnny Oshika

Answer 3

目前情况如下 - v2.x 是当前稳定版本，视图已经完全弃用。据说视图将从Ember 2.0 API中删除。

因此，在Ember 2.0中使用{{view}}关键字会触发断言：

Assertion Failed：在Ember 2.0中已删除使用{{view}}或基于它的任何路径

如果您必须在Ember 2.0中使用视图，则可以使用 ember-legacy-views插件，该插件将与Ember兼容直到2.4版本。

因此，总之 - 组件是现在（视图被删除）和未来 - 它们也将替代控制器。请参见 Routable Components RFC。

- Daniel Kmak