Ember.js 中的视图与组件

Posted 2023-02-19

【中文标题】Ember.js 中的视图与组件

【英文标题】：Views vs Components in Ember.js

【发布时间】：2013-09-06 18:07:50

【问题描述】：

我正在学习 ember.js，并试图了解视图和组件之间的区别。我认为两者都是制作可重用组件的一种方式。

来自 Ember 网站的观点：

Ember.js 中的视图通常仅出于以下原因创建： - 当您需要复杂的用户事件处理时 - 当你想创建一个可重用的组件

来自 Ember 的组件网站：

组件是自定义 html 标记，您使用 javascript 实现其行为，并使用 Handlebars 模板描述其外观。它们允许您创建可重复使用的控件，从而简化应用程序的模板。

那么视图和组件之间的主要区别是什么？什么是我更愿意使用视图而不是组件的常见示例，反之亦然？

【参考方案1】：

Ember.View

Ember.View 目前仅限于 W3C 为您创建的标签。但是，如果您想定义自己的应用程序特定的 HTML 标记，然后使用 JavaScript 实现它们的行为？您实际上无法使用 Ember.View 来执行此操作。

Ember.Component

这正是组件让您做的事情。事实上，W3C 目前正在制定 Custom Elements 规范，这真是个好主意。

Ember 的组件实现尽可能接近 Web 组件规范。一旦Custom Elements 在浏览器中广泛使用，您应该能够轻松地将您的 Ember 组件迁移到 W3C 标准，并使它们也可以被其他采用新标准的框架使用。

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

另外需要注意的是，Ember.Component 实际上是Ember.View（一个子类），但它是完全孤立的。其模板中的属性访问转到 view 对象，操作也针对 view 对象。无法访问周围的context 或外部的controller 所有上下文信息都传入，Ember.View 并非如此，它确实可以访问其周围的控制器，例如在视图中，您可以执行 this.get('controller') 之类的操作，这将为您提供当前与视图关联的控制器。

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

因此，除了组件允许您创建自己的标签之外，主要区别在于将来某个时候Custom Elements 可用时，还可以在支持自定义元素的其他框架中迁移/使用这些组件，确实在某些情况下点一个 ember 组件会使视图有些过时，具体取决于具体的实现案例。

我更愿意在组件上使用视图（反之亦然）的常见示例是什么？

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

希望对你有帮助。

更新

随着Road to Ember 2.0 的发布，现在鼓励您在大多数情况下使用组件而不是视图。

【讨论】：

我对组件的唯一担心是它们何时变得复杂。我还不知道如何将逻辑部分与渲染部分分开。我通常认为，你有这种分离，并且可以将逻辑放入控制器中，但是对于组件，我倾向于说你最终会遇到一个非常复杂的，甚至可能是巨大的混乱。你知道是否可以为组件定义一个专用的控制器？或者，组件可能只是不打算管理复杂的图形元素。

@sly7_7，是的，我明白你的意思。但是我会认为一个组件是一个黑盒子，它的行为仅基于它传入的数据。是的，取决于它的作用，这可能很快就会变得一团糟。一个专用的控制器是绝对有意义的，它可以工作的一种方式是，如果组件可以成为注入其中的逻辑，但据我所知，组件在设计上并不是 ember 容器的一部分，但它可能会在未来改变为完全解决这样的问题。无论如何，好点！

任何绑定都可以退出组件吗？ IE，组件的块形式可以将块中的内容元素绑定到组件的属性，还是在这种情况下我必须使用视图？

啊，是的，他们可以。 view.xxxx 在组件中的工作方式与在视图中相同。

Tom Dale 在这个主题上的 cmets：ember.zone/the-confusion-around-ember-views-and-components/…

【参考方案2】：

答案很简单：使用组件

根据 2013 年 8 月录制的培训视频，Yehuda Kats 和 Tom Dale（Ember 核心团队成员）告诉观众不要使用视图，除非您是框架开发人员。他们对 Handlebars 进行了许多增强并引入了组件，因此不再需要视图。视图在内部用于为 #if 和 outlet 之类的东西提供动力。

组件还非常模仿将要构建到浏览器中的 Web 组件标准，因此轻松构建 Ember 组件有很多附带好处。

2014 年 11 月 27 日更新

现在使用组件而不是视图变得更加重要，因为 Ember 2.0 将在输入路由时使用可路由组件，而不是控制器/视图。为了将来证明您的应用程序，最好远离 Views。

来源：

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

【讨论】：

"如果您觉得需要使用视图，请改用组件。"这是一个糟糕的建议，并且暴露出对组件所涉及的隔离缺乏了解。

@jmcd，虽然该评论来自框架开发者自己，但我还是删掉了。

我找到了来源：Gaslight 视频培训，视频 10.3 Components Q&A @ 26m mark。 Tom 说：“自从编写了这些示例后，……我们添加了组件，这些组件在编写这些示例时并不存在。总的来说，我会说视图不是我们期望大多数开发人员编写的东西，它们现在更像是一个内部簿记对象'

@jmcd，在那个视频@ 26:15，汤姆说“基本上不使用视图”。另外，如果你在同一个视频中跳到 30m，Yehuda Katz 说：“视图基本上是一个内部实现细节……你可以使用视图，但你是一个框架开发人员。你应该改用其中一个东西我们为您构建的使用 View 的组件，与 View 最接近但语义更好的组件是组件。您之前可以使用 View 的任何东西，组件都可以。”

【参考方案3】：

就目前而言 - v2.x 是当前的稳定版本 - 视图已被完全弃用。 It is said that views are being removed from Ember 2.0 API.

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

断言失败：使用 view 或任何基于它的路径已在 Ember 2.0 中删除

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

所以，总而言之 - 组件是现在（视图被删除）和未来 - 它们也将取代控制器。见Routable Components RFC。