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 :
App = Ember.Application.create();
Puis notre modèle de donnée :
App.Race = DS.Model.extend({
name: DS.attr('string'),
avatar: DS.attr('string'),
description: DS.attr('string')
});
Puis nous définissons le data store utilisé :
App.Store = DS.Store.extend({
revision: 13,
adapter: 'DS.FixtureAdapter'
});
Dans notre cas nous utilisons la version 13 de l’api et l’adaptateur DS.FixtureAdapter.
Nous déclarons enfin nos fixtures :
App.Race.FIXTURES = [
{id: 1, name: 'Amazon', description: "Long ago, driven by a desire for adventure, the Valkyries of the Norse settlement in Lustria sailed away from their menfolk and founded a colony deep within the estuary of the river Amaxon. Now these ferocious warriors have taken to the Blood Bowl pitch – and Nuffle save those who dare to challenge them!"},
{id: 2, name: 'Ogre', description: 'Ogre teams have existed since the forming of the NAF and have even won the XV Blood Bowl. However, as any right-minded person will tell you, having more than one Ogre in the same place at the same time is a disaster waiting to happen!'},
{id: 3, name: 'Elves', description: 'When the NAF collapsed, many Elven teams were left penniless. Those that survived the financial fallout are not as rich as their High Elf cousins nor as well equipped, but they still sure know how to play!'},
{id: 4, name: 'Human', description: "Although Human teams do not have the individual strength or outstanding abilities available to other races, they do not suffer from any outstanding weaknesses either. This makes Human teams extremely flexible, equally at home running the ball, passing it, or ignoring it and pounding the opposition into the turf instead."}
]
Enfin, nous déclarons la route :
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return App.Race.find();
}
});
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}} :
<script type="text/x-handlebars">
<ul class="nav well">
{{#each item in model}}
<li>{{item.name}}</a></li>
{{/each}}
</ul>
</script>
Le résultat doit être le suivant :
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.
