javascript - Vistas vs componentes en Ember.js

handlebars.js

Question

Estoy aprendiendo ember.js, y estoy tratando de entender la diferencia entre una vista y un componente. Veo ambos como una forma de hacer componentes reutilizables.

Desde el sitio web de Ember en vistas:

Las vistas en Ember.js normalmente solo se crean por las siguientes razones:
-Cuando necesita un manejo sofisticado de los eventos del usuario
-Cuando quieras crear un componente reutilizable

Del sitio web de Ember sobre componentes:

Un componente es una etiqueta HTML personalizada cuyo comportamiento se implementa mediante JavaScript y cuya apariencia se describe utilizando plantillas de manubrios. Le permiten crear controles reutilizables que pueden simplificar las plantillas de su aplicación.

Entonces, ¿cuál es la principal diferencia entre una vista y un componente? ¿Y cuál sería un ejemplo común en el que preferiría usar una vista sobre un componente y viceversa?

Answer 1

Ember.View

Un Ember.View está actualmente limitado a las etiquetas creadas para usted por el W3C. Pero si desea definir sus propias etiquetas HTML específicas de la aplicación y luego implementar su comportamiento mediante JavaScript? No se puede hacer esto realmente con un Ember.View .

Ember.Component

Eso es exactamente lo que los componentes le permiten hacer. De hecho, es una buena idea que el W3C esté trabajando actualmente en la especificación de elementos personalizados .

La implementación de componentes de Ember intenta estar lo más cerca posible de la especificación de Web Components. Una vez que los elementos personalizados estén ampliamente disponibles en los navegadores, debería poder migrar fácilmente sus componentes Ember al estándar W3C y hacerlos utilizables por otros marcos que también hayan adoptado el nuevo estándar.

Esto es tan importante para nosotros que estamos trabajando en estrecha colaboración con los organismos de estándares para garantizar que nuestra implementación de los componentes coincida con la hoja de ruta de la plataforma web.

También es importante tener en cuenta que un Ember.Component es en realidad un Ember.View (una subclase) pero que está completamente aislado . El acceso a la propiedad en sus plantillas va al objeto de vista y las acciones también se dirigen al objeto de vista . No hay acceso al context circundante o al controller externo toda la información contextual se pasa , que no es el caso con un Ember.View que de hecho tiene acceso a su controlador circundante, por ejemplo, dentro de una vista podría hacer algo como esto. this.get(''controller'') que le daría el controlador actualmente asociado con la vista.

Entonces, ¿cuál es la principal diferencia entre una vista y un componente?

Entonces, la diferencia principal además de que los componentes le permiten crear sus propias etiquetas y en algún punto en el futuro cuando los Elementos personalizados están disponibles también migrar / usar esos componentes en otros marcos que admitirán elementos personalizados, es de hecho que en algún punto es un componente de brasas hará una vista algo obsoleta dependiendo del caso de implementación específico.

¿Y cuál sería un ejemplo común en el que preferiría usar una vista sobre un componente y viceversa?

Siguiendo lo anterior, esto depende claramente de sus casos de uso. Pero, como regla general, si necesita ver en su vista el controlador que lo rodea, etc. use un Ember.View , pero si desea aislar la vista y pasar solo la información que necesita para trabajar, por lo que es agnóstica según el contexto y mucho más reutilizable, use un Ember.Component .

Espero eso ayude.

Actualizar

Con la publicación de Road to Ember 2.0 , ahora se recomienda utilizar componentes en lugar de vistas en la mayoría de los casos.

Answer 2

La respuesta es simple: usar componentes

De acuerdo con un video de capacitación que se grabó en agosto de 2013, Yehuda Kats y Tom Dale (miembros del equipo Ember Core) le dijeron a la audiencia que no usen vistas a menos que sea un desarrollador de frameworks. Han realizado muchas mejoras en los manubrios y presentado los componentes, por lo que las vistas ya no son necesarias. Las vistas se usan internamente para impulsar elementos como {{#if}} y {{outlet}}.

Los componentes también imitan muy de cerca el estándar Web Component que se integrará en el navegador, por lo que hay muchos beneficios secundarios para sentirse cómodo construyendo Ember Components.

Actualización 2014-11-27

Ahora es incluso más importante usar componentes en lugar de vistas, ya que Ember 2.0 usará componentes enrutables cuando se ingrese una ruta, en lugar de un controlador / vista. Para poder probar tu aplicación en el futuro, lo mejor es mantenerte alejado de Views.

Fuentes:

• Road to Ember 2.0: https://github.com/emberjs/rfcs/pull/15
• A prueba de futuro su código de Ember 1.x: https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
• No hay vista, solo componente (Tom Dale): https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice?slide=27

Answer 3

Tal como está ahora - v2.x es una versión estable actual - las vistas han sido completamente obsoletas. Se dice que las vistas se están eliminando de Ember 2.0 API .

Entonces, usar la palabra clave {{view}} en Ember 2.0 activará una afirmación:

Error de aserción: el uso de {{view}} o cualquier ruta basada en él se ha eliminado en Ember 2.0

Si tiene que usar vistas en Ember 2.0, puede usar el complemento ember-legacy-views , que será compatible con Ember hasta la versión 2.4 .

Entonces, para resumir: los componentes son el presente (las vistas que se eliminan) y el futuro; también reemplazarán a los controladores. Vea los componentes enrutables RFC .