Ember.js 中的视图与组件 [英] Views vs Components in Ember.js

问题描述

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

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 网站上的视图:

From Ember's website on views:

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

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 关于组件的网站:

From Ember's website on components:

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

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 controls that can simplify your application's templates.

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

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?

推荐答案

Ember.View

Ember.View 目前仅限于为你由 W3C.但是，如果您想定义自己的特定于应用程序的 HTML 标签，然后使用 JavaScript 实现它们的行为?您实际上无法使用 Ember.View.

Ember.View

An Ember.View is 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.

这正是组件让您做的事情.事实上，W3C 目前正在研究 自定义元素 规范.

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 Elements spec.

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

Ember's implementation of components tries to be as closely to the Web Components specification as possible. Once Custom Elements are 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.

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

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.

还需要注意的是 Ember.Component 实际上是一个 Ember.View(一个子类)但完全孤立.其模板中的属性访问转到 view 对象，操作也针对 view 对象.无法访问周围的 context 或外部 controller 所有上下文信息都传入，Ember.View 确实可以访问它周围的控制器，例如在视图中你可以做一些事情像 this.get('controller') 这会给你当前与视图关联的控制器.

Also important to note is that a Ember.Component is actually a Ember.View (a subclass) but that is completely isolated. Property access in its templates go to the view object and actions are targeted also at the view object. There is no access to the surrounding context or outer controller all contextual information is passed in, which is not the case with a Ember.View which 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.

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

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

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

So, the main difference besides that components let you create your own tags and in some point in the future when Custom Elements are 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.

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

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

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

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.

希望有帮助.

随着 Road to Ember 2.0 的发布，现在鼓励您改用组件大多数情况下的观看次数.

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

这篇关于Ember.js 中的视图与组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！