Ember.js中的视图与组件


143

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

在Ember网站上查看:

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

从Ember网站上的组件:

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

那么视图和组件之间的主要区别是什么?在我希望使用组件之上的视图,反之亦然的情况下,又有什么常见的例子呢?

Answers:


170

灰烬视图

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

灰烬成分

这正是组件允许您执行的操作。实际上,W3C目前正在制定“ 自定义元素”规范是一个好主意。

Ember的组件实现尽可能与Web组件规范保持紧密联系。一旦自定义元素是在浏览器中广泛应用,你应该能够轻松地将灰烬组件迁移到W3C标准,让他们可以通过其他框架可用,以及已经采取了新的标准。

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

还要注意的重要一点是,Ember.Component实际上是Ember.View(一个子类),但是它是完全隔离的。其模板中的属性访问转到视图对象,并且操作也以视图对象为目标。无法访问周围context或外部的controller 所有上下文信息,这与Ember.View的情况不同,它确实可以访问其周围的控制器,例如,在视图内部可以执行this.get('controller')以下操作:当前与视图关联的控制器。

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

那么,除此之外组件的主要差别让你创建自己的标签,并在当未来某个时间点自定义元素都可以也迁移/使用,将支持自定义元素其他框架的组成部分,确实在某些时候灰烬成分视具体实现情况而定,视图将有些过时。

在我希望使用组件之上的视图,反之亦然的情况下,又有什么常见的例子呢?

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

希望能帮助到你。

更新资料

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


1
我对组件的唯一关注是它们何时变得复杂。我还不知道如何将逻辑部分与渲染部分分开。我通常认为,您具有这种分离,并且可以将逻辑放入控制器中,但是使用组件,我倾向于说您最终将陷入非常复杂甚至混乱的局面。您是否知道是否可以为组件定义类似专用的控制器?也许组件只是不打算管理复杂的图形元素。
sly7_7 2013年

3
@ sly7_7,是的,我明白你的意思。但是我会将组件视为黑匣子,仅根据它传递的数据来表现。是的,取决于它执行的操作,这很快就会变得一团糟。专用的控制器绝对有道理,并且可能的工作方式是将组件变成逻辑注入其中,但据我所知,我猜组件不是设计中余烬容器的一部分,但将来可能会改变为完全解决这样的事情。反正好点!
直观

2
任何绑定都可以脱离组件吗?IE,使用组件的块形式可以将块中的内容元素绑定到组件的属性,还是在这种情况下必须使用视图?
Michael Johnston

2
嗯,可以。{{view.xxxx}}在组件中的工作原理与在视图中相同。
Michael Johnston

汤姆·戴尔(Tom Dale)对这个主题的评论:ember.zone/the-confusion-around-ember-views-and-components/…–
Akshay Rawat

17

答案很简单:使用组件

根据2013年8月录制的培训视频,Yehuda Kats和Tom Dale(Ember核心团队成员)告诉观众,除非您是框架开发人员,否则不要使用视图。他们对车把进行了很多增强,并引入了组件,因此不再需要视图。内部使用视图来增强{{#if}}和{{outlet}}之类的功能。

组件还紧密模仿将被内置到浏览器中的Web组件标准,因此舒适地构建Ember组件有很多附带好处。

更新2014-11-27

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

资料来源:


5
“如果您需要使用视图,请改用Component。” 这是一个糟糕的建议,并且背叛了对组件所涉及的隔离的缺乏了解。
jmcd 2014年

@jmcd,尽管该评论来自框架开发人员本身,但我还是删除了。
约翰尼·奥希卡

2
我找到了来源:Gaslight视频培训,视频10.3组件问答,距离26m。汤姆说:“自从编写了这些示例以来,...我们添加了在编写这些示例时不存在的组件。总的来说,我会说Views不是我们期望大多数开发人员编写的东西,此时它们更像是内部簿记对象。”
jmcd 2014年

2
@jmcd,在该视频@ 26:15中,汤姆说“基本上不使用视图”。同样,如果您在同一视频中跳到30m,Yehuda Katz说:“ View基本上是内部实现细节...您可以使用View,但是您是框架开发人员。您应该使用其中一种我们为您创建的使用View的组件,而最接近View但语义更好的组件是Component。您以前可能使用过View的任何组件都可以使用。”
约翰尼·奥希卡

5

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

因此,{{view}}在Ember 2.0中使用关键字将触发一个断言:

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

如果必须在Ember 2.0中使用视图,则可以使用ember-legacy-views插件,该插件在版本2.4之前与Ember兼容

因此,总而言之-组件是当前(视图已删除)和将来-它们还将替换控制器。请参阅路由组件RFC

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.