Iron-Router

Pascal Richier & Morea.fr

Iron-Router

Gestion d'URL avec Meteor

Présenté par Pascal Richier & www.morea.fr

Conception et infogérance d’infrastructures critiques

Petite histoire

Meteor-Router

de Tom Coleman

Co-auteur de Discover Meteor avec Sacha Greif

Mini-Pages

de Chris Mather

Conception et infogérance d’infrastructures critiques

Installation

            $ cd ./monProjet/
$ mrt add iron-router

Spécifier une version (optionnel)

            /* Fichier : smart.json */
            {
              "packages": {
                "iron-router": {
                  "git": "https://github.com/EventedMind/iron-router.git",
                  "branch": "dev"
                }
              }
            }

Conception et infogérance d’infrastructures critiques

Le chemin

La route la plus basique

            Router.map( function () {
              this.route('about');
            });

Nom : about
URL : /about
Template: about

Conception et infogérance d’infrastructures critiques

La départementale

            Router.map( function () {
              this.route('home', {
                path: '/',
                template: 'home'
              });
            });

Nom : home
URL : /
Template: home

Conception et infogérance d’infrastructures critiques

Les paramètres

            this.route('postDetail', {
              path: '/posts/:_id/:step?'
            });

Nom : postDetail
URL : /posts/anyString
URL : /posts/anyString/edit
Template: postDetail
this.params._id = anyString
this.params.step = edit

Conception et infogérance d’infrastructures critiques

Les paramètres englobants

            this.route('postNotFound', {
              path: '/posts/*'
            });

Nom : postNotFound
URL : /posts/a/b/c
Template: postNotFound
this.params = ['a/b/c']

Attention à l'ordre de déclaration des routes !

Conception et infogérance d’infrastructures critiques

Les paramètres englobants (nommés)

            this.route('anyFile', {
              path: '/files/:file(*)'
            });

Nom : anyFile
URL : /files/img/42.jpg
Template: anyFile
this.params.file = 'img/42.jpg'

Conception et infogérance d’infrastructures critiques

Les paramètres RegExp

            this.route('listPostsByDate', {
              path: /^\/posts\/date\/(\d+)\-(\d+)\-(\d+)/
            });

Nom : listPostsByDate
URL : /posts/date/2013-03-23
Template: listPostsByDate
this.params = ["2013", "03", "23"]

Conception et infogérance d’infrastructures critiques

NotFound & loading

NotFound : template appelé lorsque le chemin demandé n'existe pas ou lorsque la fonction data renvoie null

Loading : template rendu pendant le chargement des données (voir waitOn)

            Router.configure({
              notFoundTemplate: 'notFound'
              loadingTemplate: 'loading'
            });

Conception et infogérance d’infrastructures critiques

Obtenir les chemins

            <nav>
              <a href="{{ pathFor 'about' }}">About
              <a href="{{ urlFor 'imprint' }}">Imprint
            </nav>

En javascript

            // returns '/posts/1'
            Router.routes['postDetail'].path({_id: 1});
            // returns 'http://localhost:3000/posts/1'
            Router.routes['postDetail'].url({_id: 1});

variables : contexte du template

variables : en paramètres

Conception et infogérance d’infrastructures critiques

Des données pour vos templates

            this.route('authorDetail', {
              path: '/authors/:_id',
              notFoundTemplate: 'authorNotFound',
              data: function() {
                return Authors.findOne({_id: this.params._id});
              }
            });

{{firstName}}, {{lastName}}, ...
dans le contexte du template

Conception et infogérance d’infrastructures critiques

Plus de données

            this.route('authors', {
              waitOn: function() {
                return Meteor.subscribe('authorList');
              },
              data: function () {
                templateData = { authors: Authors.find() };
                return templateData;
              }
            });

ready()

{{#each authors}}

Conception et infogérance d’infrastructures critiques

Layout

Template

            <template name="complexLayout">
              <div class="left">
                {{yield "menu"}}
              </div>
              <div class="main">
                {{yield}}
              </div>
              <div class="bottom">
                {{yield "footer"}}
              </div>
            </template>
        
Route

            this.route('home', {
              path: '/',
              layoutTemplate: 'complexLayout',
              yieldTemplates: {
                'myMenu': {to: 'menu'},
                'myFooter': {to: 'footer'}
            
              }
            });

Conception et infogérance d’infrastructures critiques

Action

            this.route('home', {
              path: '/',
              layoutTemplate: 'complexLayout',
              action: function() {
                // this is an instance of RouteController
                // access to:
                //  this.params
                //  this.wait
                //  this.render
                //  this.stop
                //  this.redirect
                this.render('myMenu', {to: 'menu'});
                this.render('myFooter', {to: 'footer'});
                this.render('home');
              }
            });

Conception et infogérance d’infrastructures critiques

Factoriser avec deux contrôleurs

            BaseController = RouteController.extend({
              // code commun entre tous mes contrôleurs
            });
             
            this.route('myDocuments', {
              path: '/documents',
              controller: 'MyDocumentsController'
            });
             
            MyDocumentsController = BaseController.extend({
              layoutTemplate: 'baseLayout',
              yieldTemplates: {
                'userMenu': {to: 'menu'}
              },
              waitOn: function() {return Meteor.subscribe('waitingFor');},
              data: function () {
                data = { waitingFor : AllwaysLate.find() };
                return data;
              },
              before: function(){},
              after: function(){},
              unload: function(){},
              action: function(){
                this.render();
              }
            });

eval

before & after la fonction action

unload ⇒ une autre route est demandée

Conception et infogérance d’infrastructures critiques

Côté serveur

            Router.map(function () {
              this.route('upload', {
                where: 'server',
                action: function () {
                  var request = this.request;
                  var response = this.response;
                  // votre code
                  response.end('pong');
                  // ou
                  this.next();
                }
              });
            });

Ou pas !

Sans Iron-Router : chercher
WebApp.connectHandlers ou
__meteor_bootstrap__.app

Pour héberger vos applications Meteor critiques

MOREA vous accompagne dès la conception de votre architecture technique jusqu’à l’infogérance de vos services ou applications critiques. Morea travaille principalement avec des technologies Open Source.
Ils font confiance à Morea :

Merci !

Thanks to manuel-schoebel.com for his articles !

www.morea.fr