TD n°0

Exemple de démonstration : projet first-app

Objectifs

  1. Créer des routes, des models, utiliser les templates
  2. Montrer la cohérence et la simplicité du framework

Pré-requis

Installations

  • Node + npm
  • ember-cli
  • WebStorm + ember.js plugin
  • plugin Ember inspector

Création du projet

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

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.

Data-binding

Dans app/templates/user.hbs

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

Routage

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>

richclient/emberjs/td0.txt · Dernière modification: 2019/01/23 02:54 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