¿Cuál es la diferencia entre una ruta y un recurso en New Router API?

114

Estoy tratando de entender la diferencia entre a Routey a Resource. La forma en que entiendo Resourceayuda a establecer subrutas de un Routeobjeto a otro RouteObjeto. Pero no está claro cuando pienso en el mapeo de nombres predeterminado que ocurre también para las rutas.

ember.js ember-router thecodejack
fuente

Respuestas:

101

Tenga en cuenta que desde 1.11.0 en adelante, this.routesolo se usa en lugar de this.resource. Fuente: http://guides.emberjs.com/v1.11.0/routing/defining-your-routes/ *

Eche un vistazo a esta publicación para obtener una explicación detallada.

Este es un resumen aproximado de esta publicación (he modificado un poco):

Desde el cambio de recurso y ruta, mucha gente está confundida sobre el significado de los dos y cómo afectan el nombre. Esta es la diferencia:

  • recurso - una cosa (un modelo)
  • ruta - algo que ver con la cosa

Entonces, esto significa que un enrutador que usa una ruta y un recurso podría verse así:

App.Router.map(function() {
  this.resource("posts", { path: "/" }, function() {
    this.route("new", { path: "/new" });
  });
  this.route("another", { path: "/another" });
});

Esto resultaría en la creación / uso de las siguientes rutas:

  • PostsRoute, PostsController, PostsView
  • PostsIndexRoute, PostsIndexController, PostsIndexView
  • PublicacionesNuevoRuta, PublicacionesNuevoControlador, PublicacionesNuevoVer
  • AnotherRoute, AnotherController, AnotherView

Como vemos en este ejemplo, el recurso afecta el nombre de los Controladores, Rutas y Vistas que se utilizan / crean (La "nueva" ruta se trata como subordinada al recurso "Publicaciones"). Cite de la fuente original (la modifiqué, porque era irritante, como Patrick M señaló correctamente en los comentarios):

Esto significa que cada vez que crea un recurso, se creará un espacio de nombres completamente nuevo. Ese espacio de nombres lleva el nombre del recurso y todas las rutas secundarias se insertarán en él.

Actualización: ejemplo más complejo con recursos anidados

Considere el siguiente ejemplo más complejo con varios recursos anidados:

App.Router.map(function() {
  this.resource("posts", { path: "/" }, function() {
    this.route("new", { path: "/new" });
    this.resource("comments", { path: "/comments" }, function() {
      this.route("new", { path: "/new" });
    });
  });
  this.route("another", { path: "/another" });
});

En este caso, el recurso commentscrea un nuevo espacio de nombres. Esto significa que las rutas resultantes en este caso serán las siguientes. Como puede ver, la ruta, el controlador y la vista para el recurso de comentarios no tienen como prefijo el nombre de la ruta principal. Eso significa que anidar un recurso dentro de otro recurso restablece el espacio de nombres (= crea un nuevo espacio de nombres).

  • PostsRoute, PostsController, PostsView
  • PostsIndexRoute, PostsIndexController, PostsIndexView
  • PublicacionesNuevoRuta, PublicacionesNuevoControlador, PublicacionesNuevoVer
  • ComentariosRoute, CommentsController, CommentsView
  • ComentariosNewRoute, ComentariosNewController, ComentariosNewView
  • AnotherRoute, AnotherController, AnotherView

Este comportamiento también se explica en Ember Docs .

mavilein
fuente
4
Esto debería quedar más claro en las guías de Ember. Ciertamente, este concepto me confundió al principio.
Gabriel G. Roy
Excelente resumen de una excelente publicación. Pero la última cotización de incluir no tiene sentido: That namespace will have an " which [...]. ¿Qué "significa? ¿Es solo un marcador de posición para Ruta | Controlador | ¿Ver?
Patrick M
Hola Patrick, gracias por señalar eso. Ya no pude darme una pista. Por lo tanto, agregué un ejemplo más complejo con recursos anidados. Creo que esta cita se refirió a este escenario.
mavilein
Eso es mucho más claro. Gracias por el ejemplo adicional, mavilein.
Patrick M
¿Puede explicar cuál es la diferencia (si la hay) entre su ejemplo y esto:App.Router.map(function() { this.route("posts", { path: "/" }, function() { this.route("new"); this.route("comments"}, function() { this.route("new"); }); }); this.route("another", { path: "/another" }); });
Timo