A la découverte d?Ember (version 1.13) ? Partie 3

de | septembre 14, 2015

Bienvenue dans cette troisième partie de ce tutoriel consacrée à la création d’un blog avec Ember.js. Dans cette partie nous allons voir comment mettre en place notre système de routing. Avec Ember les contrôleurs sont réduis à leur plus simple expression. Ceci ne sont utilisés que pour gérer l’état des éléments de vos templates. Toute la mécanique se passe dans les routes.

Ces routes gèrent les appels au métier afin de charger les données dont ont besoins les templates, elles gèrent également les actions effectuées sur un élément d’une page et qui ont un impact sur le modèle. La soumission d’un formulaire sera ainsi géré par une route.

Les routes sont déclarées dans le fichier app/router.js. Voici les routes dont nous auront besoin dans le cadre de notre blog:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
location: config.locationType
});

Router.map(function() {
//Cette route est le point d'entré de la zone d'administration.
this.route('admin',{path : '/admin'}, function() {
this.route('post', {path: 'post'} , function() {
    this.route('index');
    this.route('add');
    this.route('edit, {path: 'edit/:post_id'}');
    this.route('view', {path: 'edit/:post_id'});
});
this.route('user', {path: 'user'} , function() {
    this.route('index');
    this.route('add');
    this.route('edit', {path: 'edit/:user_id'});
    this.route('view', {path: 'edit/:user_id'});
});
this.route('comment', {path: 'comment'} , function() {
    this.route('index');
    this.route('add');
    this.route('edit'{path: 'edit/:comment_id'});
    this.route('view'{path: 'edit/:comment_id'});
});
});
// Toute les routes suivantes seront publiques.
this.route('public', {path : '/public'});

});

export default Router;

Les routes peuvent être imbriquées ensemble. Nous créons donc deux routes de base (admin et public). Ceci va nous permettre plus tard  de créer une zone d’administration. Toutes les routes appartenant à admin seront donc soumise à authentification. Inversement toutes les routes appartenant à public seront accessible sans authentification.

Dans la zone d’administration nous définissons trois routes ( post, user, comment) afin de gérer toutes nos données. Chaque route contient quatre routes permettant de réaliser les opérations classiques en base de donnée.

Concernant la route public, Ember créer par défaut une route index pour chaque route crée.  Ainsi :


this.route('public', {path : '/public'});

est équivalent à :

this.route('public', {path : '/public'}, function() {
    this.route('index');
});

La variable path est facultative et permet de spécifier un chemin différent du nom de la route ainsi que d’éventuelles paramètres à passer dans l’url. Par exemple dans la route permettant d’éditer un post :


this.route('edit, {path: 'edit/:post_id'}');

:post_id correspond à l’id du post que nous voulons éditer.

Pour chaque route définis dans le fichier routeur.js correspond un fichier portant le nom de la route et se situant dans le dossier routes. Pour voir le lien entre une route, son contrôleur et son template je vous laisse voir la documentation d’Ember : http://guides.emberjs.com/v2.0.0/routing/defining-your-routes/. Vous pouvez aussi télécharger le plugin Ember inspector pour vous aider à débugguer  vos routes.

Dans le prochain article nous commencerons la construction de l’interface d’administration et nous continuerons à parler des routes, qui est un des concepts fondamentaux dans Ember.

 

 

00

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.