Routing

Le router EmberJs associe chaque URL connue à un ou plusieurs route handlers.

Un route handler peut :

  • Afficher un template.
  • Charger un model pour le mettre à disposition d'un template.
  • Effectuer une redirection vers une nouvelle route (si par ex l'utilisateur n'a pas l'autorisation d'accès à la route sollicitée).
  • Gérer les actions permettant la modification du model ou réalisant une redirection.

Création de routes

Pour générer une route avec ember-cli :

ember generate route route-name

La commande generate route :

  • crée le fichier js correspondant au route handler app\routes\route-name.js
  • crée le template app\templates\route-name.hbs
  • met à jour le router en ajoutant la route au map
  • crée un fichier de test

Exemple de fichier router :

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

Utilisation dans un fichier template avec le helper <LinkTo> :

<LinkTo @route="index"><img class="logo"></LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

Routes imbriquées

Une route imbriquée permet d'afficher le résultat d'un template dans un template principal.

La route posts/new correspond à l'affichage du formulaire new post, appelé depuis la liste des posts.

Elle peut-être générée par la commande :

ember generate route posts/new

Router.map(function() {
  this.route('posts', function() {
    this.route('new');
  });
});

Le template posts.hbs devra dans ce cas faire appel au helper {{outlet}} pour insérer le contenu du template new :

<h1>Posts</h1>
<!-- Display posts and other content -->
{{outlet}}

Routes index

A chaque url, ember associe automatiquement une route index implicite :

La configuration suivante du router :

Router.map(function() {
  this.route('favorites');
});
est équivalente à :
Router.map(function() {
  this.route('index', { path: '/' });
  this.route('favorites');
});

Ember ajoute automatiquement un index à chaque appel de function.

Ainsi, pour une route imbriquée :

Router.map(function() {
  this.route('posts', function() {
    this.route('favorites');
  });
});
l'équivalent pour ember est :
Router.map(function() {
  this.route('index', { path: '/' });
  this.route('posts', function() {
    this.route('index', { path: '/' });
    this.route('favorites');
  });
});

A l'adresse /posts, la route active sera posts.index, le template posts/index sera affiché grâce au helper {{outlet}} dans le template posts.

A l'adresse /posts/favorites, Ember remplacera {{outlet}} dans le template posts avec le contenu du template posts/favorites.

Segments dynamiques

Une url avec segments dynamiques possède une ou plusieurs parties variables, introduites par un : et suivies par un identifier.

Router.map(function() {
  this.route('posts');
  this.route('post', { path: '/post/:post_id' });
});

Nommage des identifiers

Pour faciliter le chargement des models, il est conseillé de respecter la convention de nommage suivante :
un identifier devra respecter la norme :model-name_id

Router.map(function() {
  this.route('photo', { path: '/photo/:photo_id' }, function() {
    this.route('comment', { path: '/comment/:comment_id' });
  });
});

Lien vers route dynamique

<LinkTo @route="photos.edit" @model="1">First Photo Ever</LinkTo>

Segments dynamiques multiples

<h1>Latest Comments</h1>

<ul>
  {{#each this.latestComments as |comment|}}
    <li>
      <LinkTo @route="photos.photo.comment" @models={{array comment.photo comment}}>
        {{excerpt comment.body}}...
      </LinkTo>
    </li>
  {{/each}}
</ul>

Paramètres

<LinkTo @route="posts" @query={{hash direction="asc"}}>Sort</LinkTo>

// Binding is also supported
<LinkTo @route="posts" @query={{hash direction=this.otherDirection}}>Sort</LinkTo>

Non historisation

<LinkTo @route="photo.comment" @model={{this.topComment}} @replace={{true}}>
  Top comment for the current photo
</Link>

richclient/emberjs/router.txt · Dernière modification: 2020/01/22 11:22 par jcheron
GNU Free Documentation License 1.3
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0