Mike Grassotti Minimum Viable Ember.js Guide de Démarrage rapide
Ce guide de démarrage rapide devrait vous obtenir à partir de zéro à un peu-plus-que-zéro dans un couple de minutes. Quand cela est fait, vous devriez vous sentir assez confiants que ember.js en fait, il fonctionne, et j'espère être assez intéressé à en savoir plus.
AVERTISSEMENT: Ne pas juste essayer ce guide alors pensez de braise-suce cause", je pourrais écrire que guide de démarrage rapide-guide mieux en jQuery ou Fortran" ou quoi que ce soit. Je n'essaie pas de vous vendre sur la braise ou quoi que ce soit, ce guide est un peu plus qu'un bonjour-monde.
Étape 0 - découvrez jsFiddle
cette jsFiddle a tout le code de cette réponse
Étape 1 - Inclure ember.js et les autres bibliothèques
Ember.js nécessite à la fois de jQuery et du Guidon. 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 - description de l'interface utilisateur de l'application en utilisant un ou plusieurs modèles de guidon
Par défaut braise va remplacer le corps de votre page html à l'aide du contenu d'une ou de plusieurs handlbars modèles. Un jour, ces modèles seront en séparer .hbs fichiers assemblés par des pignons ou peut-être grunt.js. Pour l'instant, nous allons garder le tout dans un seul fichier et d'utiliser les balises de script.
Tout d'abord, nous allons ajouter un seul application modèle de:
<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 - Initialiser votre braise application
Juste ajouter un bloc de script avec App = Ember.Application.create({}); à la charge ember.js et d'initialiser votre application.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Vous n'avez pas besoin de créer une base de braise à l'application, mais ce n'est pas très intéressant.
Étape 4: Ajouter un contrôleur
Braise évalue chaque guidon de modèles dans le contexte d'un contrôleur. Donc, application modèle a une correspondance ApplicationController. Ember est crée automatiquement si vous ne définissez pas un, mais ici, nous allons personnaliser il pour ajouter un message à la propriété.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Étape 5: Définir des itinéraires + plus de contrôleurs et de modèles
Braise routeur permet de combiner facilement des 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 ce faire, nous allons modifier notre modèle d'application par l'ajout d'un {{outlet}} helper. Braise routeur rendra modèle approprié dans la prise de courant en fonction de l'utilisateur de la route. Nous allons également utiliser l' {{linkTo}} de l'aide 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>
Fait!
Un exemple de cette application est disponible ici.
Vous pouvez utiliser cette jsFiddle comme un point de départ pour vos propres applications de braise
Prochaines Étapes...
- Lire la Braise Guides
- Peut-être acheter les Peepcode screencast
- Poser des questions ici sur un Débordement de Pile ou dans la braise IRC
Pour référence, ma réponse:
Ma question est pour tout Ember.js d'experts, et certainement respectifs tutoriel auteurs: Quand dois-je utiliser des modèles de conception à partir d'un tutoriel, et quand de l'autre?
Ces deux tutoriels représentent les meilleures pratiques au moment où ils ont été écrits. Pour sûr, il ya quelque chose qui peut être appris de chacun, les deux sont malheureusement vouée à devenir obsolètes parce que ember.js se déplace très rapidement. Des deux, le Trek est de loin la plus actuelle.
Quels sont les composants de chacun sont préférences personnelles, et quels sont les composants qui s'avérera indispensable dans mon application évolue?
Si vous développez une nouvelle application de braise, je ne recommanderais pas à la suite du Code Lab approche. Il est tout simplement trop out-of-date, pour être utile.
Dans le Code du Laboratoire de conception, de Braise semble plus proche de l'existant au sein de l'application (même si c'est 100% de sa coutume JS), alors que le Trek de l'application semble vivre plus à l'intérieur de Braise.
Votre commentaire est en plein dans le mille. CodeLab est prise de prendre avantage de la base de braise de composants et d'y accéder à partir de portée mondiale. Quand il a été écrit (il y a 9 mois), c'était assez commun, mais aujourd'hui des meilleures pratiques pour la rédaction de braise applications est beaucoup plus proche de ce Trek était en train de faire.
Cela dit, même Trek tutoriel est en train de devenir obsolète. Les composants qui ont été tenus ApplicationView et ApplicationController sont maintenant générés par le cadre lui-même.
De loin la plus courante de la ressource est l'ensemble des guides publiés à http://emberjs.com/guides/
- ils ont été écrits à partir du sol en place au cours des dernières semaines et de tenir compte de la dernière (pre-release) version de braise.
Je voudrais aussi vérifier trek wip projet ici: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
EDIT:
@sly7_7 : je voudrais aussi donner un autre exemple, à l'aide de ember-data https://github.com/dgeb/ember_data_example
