Browsed by
Catégorie : Ember.js

Mes débuts avec Ember.js 2 [FR]

Mes débuts avec Ember.js 2 [FR]

Voici la suite de ma découverte d’Ember.js. Dans cette partie, nous verrons

Afin d’afficher les onglets en haut de la page il nous faut modifier le code html généré par handlebarsjs:

Le placeholder {{outlet}} permet le changement de template en fonction de la page demandé.

Ce template sert à créer les onglets a l’aide de bootstrap.

L’attribut data-template-name="races" sert a lié ce template avec la ressource this.resource('races', { path: '/' }); afin que.

Les lignes 8 à 10 parcourent la liste des équipes afin d’afficher le nom.

A ce niveau, vous devriez voir:

tabs

Mes débuts avec Ember.js 1 [FR]

Mes débuts avec Ember.js 1 [FR]

Voulant m’essayer au framework JavaScript pour des Single Page Application j’ai cherché sur internet ce qu’il se fessait et mon choix c’est arrêté sur Ember.js.

Pour commencer il faut créer la base l’application:

  • Télécharger les dépendances, jQuery, Handlebars, Ember.js et Ember Data.
  • Créer un fichier html
  • Ajouter les feuilles de styles

Le code de base est disponible dans un de mes dépôts github sous le tag 0.1.

Dans un premier temps, nous allons créer notre application :

Puis notre modèle de donnée :

Puis nous définissons le data store utilisé :

Dans notre cas nous utilisons la version 13 de l’api et l’adaptateur DS.FixtureAdapter.

Nous déclarons enfin nos fixtures :

Enfin, nous déclarons la route :

Passons au fichier html. Il faut parcourir la liste des élément et afficher le nom pour chacun d’eux. Pour ce la nous déclarons un script x-handlebars a l’intérieur duquel nous itérons avec l’instruction {{#each item in model}} :

Le résultat doit être le suivant :

races

Dans la console web on peut voir les versions des librairies utilisées pas Ember.js. Si il y avait une erreur, elle serait également visible à cet endroit.

Le code de cette version est accessible sur le tag 0.2.