Quelle est la différence entre une route et une ressource dans l'API New Router?


114

J'essaie de comprendre la différence entre a Routeet a Resource. La façon dont je comprends Resourceaide à définir les sous-chemins d'un Routeobjet vers un autre Routeobjet. Mais ce n'est pas clair quand je pense au mappage de noms par défaut qui se produit également pour les chemins.

Réponses:


101

Veuillez noter qu'à partir de la version 1.11.0, il this.routen'est utilisé qu'à la place de this.resource. Source: http://guides.emberjs.com/v1.11.0/routing/defining-your-routes/ *

Jetez un œil à cet article pour une explication détaillée.

Voici un résumé approximatif de ce post (j'ai un peu modifié):

Depuis le changement de ressource et d'itinéraire, beaucoup de gens sont confus quant à la signification des deux et à la façon dont ils affectent la dénomination. Voici la différence:

  • ressource - une chose (un modèle)
  • route - quelque chose à voir avec la chose

Cela signifie donc qu'un routeur utilisant une route et une ressource peut ressembler à ceci:

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

Cela entraînerait la création / l'utilisation des routes suivantes:

  • PostsRoute, PostsController, PostsView
  • PostsIndexRoute, PostsIndexController, PostsIndexView
  • ArticlesNouveauRoute, ArticlesNouveauContrôleur, Articles
  • AnotherRoute, AnotherController, AnotherView

Comme nous le voyons dans cet exemple, la ressource affecte la dénomination des contrôleurs, routes et vues utilisées / créées (la "nouvelle" route est traitée comme subordonnée à la ressource "posts"). Citez la source originale (je l'ai modifiée, car c'était irritant comme Patrick M l'a correctement souligné dans les commentaires):

Cela signifie que chaque fois que vous créez une ressource, elle crée un tout nouvel espace de noms. Cet espace de noms porte le nom de la ressource et toutes les routes enfants y seront insérées.

Mise à jour: exemple plus complexe avec des ressources imbriquées

Prenons l'exemple plus complexe suivant avec plusieurs ressources imbriquées:

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" });
});

Dans ce cas, la ressource commentscrée un tout nouvel espace de noms. Cela signifie que les routes résultantes dans ce cas seront les suivantes. Comme vous pouvez le voir, les ressources Route, Controller et View pour les commentaires ne sont pas précédées du nom de la route parent. Cela signifie que l'imbrication d'une ressource dans une autre ressource réinitialise l'espace de noms (= crée un nouvel espace de noms).

  • PostsRoute, PostsController, PostsView
  • PostsIndexRoute, PostsIndexController, PostsIndexView
  • ArticlesNouveauRoute, ArticlesNouveauContrôleur, Articles
  • CommentsRoute, CommentsController, CommentsView
  • CommentairesNouveauRoute, CommentairesNouveauContrôleur, CommentairesNouveauVue
  • AnotherRoute, AnotherController, AnotherView

Ce comportement est également expliqué dans la documentation Ember .


4
Cela devrait être plus clair dans les guides Ember. J'étais certainement confus par ce concept au début.
Gabriel

Excellent résumé d'un excellent article. Mais la dernière citation que vous incluez n'a pas de sens: That namespace will have an " which [...]. Qu'est-ce que cela "signifie? Est-ce juste un espace réservé pour Route | Contrôleur | Vue?
Patrick M

Salut Patrick, merci de l'avoir signalé. Je ne pouvais plus en tirer la moindre idée. Par conséquent, j'ai ajouté un exemple plus complexe avec des ressources imbriquées. Je pense que cette citation faisait référence à ce scénario.
mavilein

C'est beaucoup plus clair. Merci pour l'exemple supplémentaire, mavilein.
Patrick M

Pouvez-vous préciser quelle est la différence (le cas échéant) entre votre exemple et celui-ci: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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.