Guide de démarrage rapide d'Ember.js minimum viable de Mike Grassotti
Ce guide de démarrage rapide devrait vous permettre de passer de zéro à un peu plus de zéro en quelques minutes. Une fois terminé, vous devriez vous sentir un peu confiant que ember.js fonctionne réellement et, espérons-le, sera suffisamment intéressé pour en savoir plus.
AVERTISSEMENT: N'essayez pas simplement ce guide, alors pensez que les braises sont nulles parce que "je pourrais mieux écrire ce guide de démarrage rapide dans jQuery ou Fortran" ou autre. Je n'essaie pas de vous vendre en braise ou quoi que ce soit, ce guide n'est guère plus qu'un bonjour-monde.
Étape 0 - Découvrez jsFiddle
ce jsFiddle a tout le code de cette réponse
Étape 1 - Incluez ember.js et les autres bibliothèques requises
Ember.js nécessite à la fois jQuery et Handlebars. Assurez-vous que ces bibliothèques sont chargées avant ember.js:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
Étape 2 - Décrivez l'interface utilisateur de votre application à l'aide d'un ou plusieurs modèles de guidons
Par défaut, ember remplacera le corps de votre page html en utilisant le contenu d'un ou plusieurs modèles de barres de navigation. Un jour, ces modèles seront dans des fichiers .hbs séparés assemblés par des pignons ou peut-être grunt.js. Pour l'instant, nous allons tout conserver dans un seul fichier et utiliser des balises de script.
Tout d'abord, ajoutons un seul applicationmodèle:
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
</div>
</script>
Étape 3 - Initialisez votre application de braise
Ajoutez simplement un autre bloc de script avec App = Ember.Application.create({});pour charger ember.js et initialiser votre application.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
C'est tout ce dont vous avez besoin pour créer une application de base de braise, mais ce n'est pas très intéressant.
Étape 4: Ajouter un contrôleur
Ember évalue chaque modèle de guidon dans le contexte d'un contrôleur. Le applicationmodèle a donc une correspondance ApplicationController. Ember crée automatiquement si vous n'en définissez pas, mais personnalisons-le ici pour ajouter une propriété de message.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Étape 5: Définissez les routes + plus de contrôleurs et de modèles
Le routeur Ember facilite la combinaison de modèles / contrôleurs dans une application.
<script type='text/javascript'>
App.Router.map(function() {
this.route("index", { path: "/" });
this.route("list", { path: "/list" });
});
App.IndexController = Ember.Controller.extend({
message: 'Hello! See how index.hbs is evaluated in the context of IndexController'
});
App.ListRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
}
});
</script>
Pour que cela fonctionne, nous modifions notre modèle d'application en ajoutant un {{outlet}}assistant. Le routeur Ember rendra le modèle approprié dans la prise en fonction de l'itinéraire de l'utilisateur. Nous utiliserons également l' {{linkTo}}assistant pour ajouter des liens de navigation.
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
<div class="row">
{{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
{{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="list">
<h3 class="demo-panel-title">This is the list template</h3>
<ul>
{{#each item in content}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h3 class="demo-panel-title">This is the index template</h3>
<p>{{message}}</p>
</script>
Terminé!
Un exemple fonctionnel de cette application est disponible ici .
Vous pouvez utiliser ce jsFiddle comme point de départ pour vos propres applications de braise
Prochaines étapes...
- Lisez les guides Ember
- Peut-être acheter le screencast Peepcode
- Posez vos questions ici sur Stack Overflow ou dans IRC de braise
Pour référence, ma réponse originale:
Ma question s'adresse à tout expert Ember.js, et certainement aux auteurs de tutoriels respectifs: quand dois-je utiliser les modèles de conception d'un tutoriel, et quand de l'autre?
Ces deux didacticiels représentent les meilleures pratiques au moment de leur rédaction. Pour sûr, il y a quelque chose qui peut être appris de chacun, les deux sont malheureusement voués à devenir obsolètes car ember.js évolue très rapidement. Des deux, Trek est beaucoup plus actuel.
Quels composants de chacun sont des préférences personnelles et quels composants s'avéreront essentiels à mesure que mon application mûrit? Si vous développez une nouvelle application de braises, je ne recommanderais pas de suivre l'approche Code Lab. Il est tout simplement trop obsolète pour être utile.
Dans la conception de Code Lab, Ember semble être plus proche de l'existant au sein de l'application (même s'il s'agit à 100% de son JS personnalisé), alors que l'application de Trek semble vivre davantage dans Ember.
Votre commentaire est parfait. CodeLab tire parti des composants de base de la braise et y accède à partir d'une portée mondiale. Quand il a été écrit (il y a 9 mois), c'était assez courant, mais aujourd'hui, les meilleures pratiques pour écrire des applications de braise sont beaucoup plus proches de ce que faisait Trek.
Cela dit, même le tutoriel de Trek devient obsolète. Composants qui étaient requis ApplicationViewet ApplicationControllersont maintenant générés par le framework lui-même.
La ressource de loin la plus récente est l'ensemble de guides publiés sur http://emberjs.com/guides/
- ils ont été écrits à partir de zéro au cours des dernières semaines et reflètent la dernière version (pré-version) de ember.
Je vais également consulter le projet wip de trek ici: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
MODIFIER :
@ sly7_7: Je donnerais également un autre exemple, en utilisant des données de braise https://github.com/dgeb/ember_data_example