TD n°0

Exemple de démonstration : projet first-app

Créer le projet first-app dans votre dossier local ember-tds

        
              cd ember-tds
ember new first-app

Démarrer le serveur ember :

        
              cd first-app
ember serve

Création d'une route (se placer dans le dossier du projet) :

ember generate route user

ou en version plus courte :

ember g route user

L'url http://127.0.0.1:4200/user est maintenant accessible.

Dans app/templates/user.hbs

        
              {{input value=this.nom}}
<div>{{nom}}</div>

Cet exemple illustre les routes imbriquées

Créer une route client

Définir le model hook dans app/routes/client.js

        
              export default Route.extend({
  model(){
    return {nom:'Smith',
            details:'Des détails sur Smith...'}
  }
});

Dans app/templates/client.hbs

        
              <h1>{{model.nom}}</h1>
{{#link-to "client.details"}}
  Détails
{{/link-to}}
{{outlet}}

Créer une route client/details

Modifier app/routes/client/details.js pour y ajouter une action permettant de masquer le detail (en retournant à la page client)

        
              export default Route.extend({
  actions:{
    fermer(){
      this.transitionTo('client');
    }
  }
});

Modifier le template app/templates/client/details.hbs :

        
              {{model.details}}
<button {{action "fermer"}}>Fermer</button>

Objectifs