javascript Ember.js 中的视图与组件

Views vs Components in Ember.js

提问by Bradley Trager

I am learning ember.js, and I am trying to understand the difference between a view and a component. I see both as a way of making reusable components.

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

From Ember's website on views:

从 Ember 的网站上查看：

Views in Ember.js are typically only created for the following reasons:
-When you need sophisticated handling of user events
-When you want to create a re-usable component

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

From Ember's website on components:

从 Ember 关于组件的网站：

A component is a custom HTML tag whose behavior you implement using JavaScript and whose appearance you describe using Handlebars templates. They allow you to create reusable controlsthat can simplify your application's templates.

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

So what is the main difference between a view and a component? And what would be a common example where I would prefer to use a view over a component and vice versa?

那么视图和组件之间的主要区别是什么？什么是我更喜欢在组件上使用视图的常见示例，反之亦然？

回答by intuitivepixel

Ember.View

余烬视图

An Ember.Viewis currently limited to the tags that are created for you by the W3C. But if you wanted to define your own application-specific HTML tags and then implement their behavior using JavaScript? You can't do this actually with a Ember.View.

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

Ember.Component

Ember.Component

That's exactly what components let you do. In fact, it's such a good idea that the W3C is currently working on the Custom Elementsspec.

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

Ember's implementation of components tries to be as closely to the Web Components specification as possible. Once Custom Elementsare widely available in browsers, you should be able to easily migrate your Ember components to the W3C standard and have them be usable by other frameworks as well that have adopted the new standard.

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

This is so important to us that we are working closely with the standards bodies to ensure our implementation of components matches the roadmap of the web platform.

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

Also important to note is that a Ember.Componentis actually a Ember.View(a subclass) but that is completely isolated. Property access in its templates go to the viewobject and actions are targeted also at the viewobject. There is no access to the surrounding contextor outer controllerall contextual information is passed in, which is not the case with a Ember.Viewwhich indeed has access to it's surrounding controller, for example inside a view you could do something like this.get('controller')which would give you the controller currently associated with the view.

同样需要注意的是Ember.Component实际上是一个Ember.View（一个子类），但它是完全隔离的。其模板中的属性访问转到视图对象，操作也以视图对象为目标。无法访问周围context或外部的controller所有上下文信息，而Ember.View确实可以访问其周围的控制器，例如在视图中，您可以执行类似的操作this.get('controller')，这将给您当前与视图关联的控制器。

So what is the main difference between a view and a component?

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

So, the main difference besides that components let you create your own tags and in some point in the future when Custom Elementsare available also migrate/use those components in other frameworks that will support custom elements, is indeed that at some point an ember component will make a view somewhat obsolete depending on the specific implementation case.

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

And what would be a common example where I would prefer to use a view over a component and vice versa?

什么是我更喜欢在组件上使用视图的常见示例，反之亦然？

Following the above this depends clearly on your use cases. But as a rule of thumb, if you need in your view access to it's surrounding controller etc. use a Ember.View, but if you want to isolated the view and pass in only the information that it needs to work making it context-agnostic and much more reusable, use a Ember.Component.

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

Hope it helps.

希望能帮助到你。

Update

更新

With the publication of Road to Ember 2.0you are now encouraged to use Components instead of Views in most of the cases.

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

回答by Johnny Oshika

The answer is simple: use components

答案很简单：使用组件

According to a training video that was recorded on August 2013, Yehuda Kats and Tom Dale (Ember Core Team Members) told the audience to not use views unless you're a framework developer. They've made lots of enhancements to Handlebars and introduced Components, so views are no longer necessary. Views are used internally to power things like {{#if}} and {{outlet}}.

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

Components also closely mimic the Web Component standard that will be build into the browser, so there are lots of side benefits to becoming comfortable building Ember Components.

组件还密切模仿了将被构建到浏览器中的 Web 组件标准，因此构建 Ember 组件有很多好处。

Update 2014-11-27

更新 2014-11-27

It's even more important now to use components instead of views, as Ember 2.0 will be using Routable Components when a route is entered, instead of a controller/view. In order to future proof your app, it's best to stay away from Views.

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

Sources:

资料来源：

• Road to Ember 2.0: https://github.com/emberjs/rfcs/pull/15
• Future-proofing your Ember 1.x code: https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
• There is no view, only component (Tom Dale): https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice?slide=27

• 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

回答by Daniel Kmak

As it stands now - v2.xbeing current stable release - views have been completely deprecated. It is said that views are being removed from Ember 2.0 API.

就目前而言 -v2.x作为当前的稳定版本 - 视图已被完全弃用。据说视图正在从 Ember 2.0 API 中删除。

So, using {{view}}keyword in Ember 2.0 will trigger an assertion:

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

Assertion Failed: Using {{view}}or any path based on it has been removed in Ember 2.0

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

If you have to use views in Ember 2.0 you can use ember-legacy-viewsaddon, which will be compatible with Ember until version 2.4.

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

So, to sum up - components are the present (views being removed) and the future - they will also replace controllers. See Routable Components RFC.

所以，总而言之——组件是现在（视图被删除）和未来——它们也将取代控制器。请参阅可路由组件 RFC。