Mike Grassottis Minimum Viable Ember.js QuickStart-Anleitung
Diese Kurzanleitung sollte Sie in wenigen Minuten von null auf etwas mehr als null bringen . Wenn Sie fertig sind, sollten Sie sich sicher sein, dass ember.js tatsächlich funktioniert und hoffentlich interessiert genug ist, um mehr zu erfahren.
WARNUNG: Probieren Sie diese Anleitung nicht einfach aus, und denken Sie dann, dass Glut saugt, weil "Ich könnte diese Kurzanleitung besser in jQuery oder Fortran schreiben" oder was auch immer. Ich versuche nicht, Sie auf Glut oder so etwas zu verkaufen, dieser Leitfaden ist kaum mehr als eine Hallo-Welt.
Schritt 0 - Schauen Sie sich jsFiddle an
Diese jsFiddle hat den gesamten Code aus dieser Antwort
Schritt 1 - Fügen Sie ember.js und andere erforderliche Bibliotheken hinzu
Ember.js erfordert sowohl jQuery als auch Lenker. Stellen Sie sicher, dass diese Bibliotheken vor ember.js geladen sind:
<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>
Schritt 2 - Beschreiben Sie die Benutzeroberfläche Ihrer Anwendung anhand einer oder mehrerer Lenkervorlagen
Standardmäßig ersetzt Ember den Text Ihrer HTML-Seite durch den Inhalt einer oder mehrerer Handlbar-Vorlagen. Eines Tages werden diese Vorlagen in separaten .hbs-Dateien vorliegen, die von Kettenrädern oder vielleicht grunt.js zusammengestellt werden. Im Moment werden wir alles in einer Datei behalten und Skript-Tags verwenden.
Fügen wir zunächst eine einzelne applicationVorlage hinzu:
<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>
Schritt 3 - Initialisieren Sie Ihre Glutanwendung
App = Ember.Application.create({});Fügen Sie einfach einen weiteren Skriptblock mit hinzu , um ember.js zu laden und Ihre Anwendung zu initialisieren.
<script type='text/javascript'>
App = Ember.Application.create({});
</script>
Das ist alles, was Sie brauchen, um eine grundlegende Glutanwendung zu erstellen, aber es ist nicht sehr interessant.
Schritt 4: Fügen Sie einen Controller hinzu
Ember wertet jede Lenkervorlage im Kontext eines Controllers aus. Die applicationVorlage hat also eine Übereinstimmung ApplicationController. Ember erstellt automatisch, wenn Sie keine definieren. Hier können Sie sie jedoch anpassen, um eine Nachrichteneigenschaft hinzuzufügen.
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>
Schritt 5: Definieren Sie Routen + mehr Controller und Vorlagen
Der Ember-Router erleichtert das Kombinieren von Vorlagen / Controllern in einer Anwendung.
<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>
Damit dies funktioniert, ändern wir unsere Anwendungsvorlage, indem wir einen {{outlet}}Helfer hinzufügen . Der Ember-Router rendert je nach Route des Benutzers die entsprechende Vorlage in den Ausgang. Wir werden den {{linkTo}}Helfer auch verwenden , um Navigationslinks hinzuzufügen.
<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>
Getan!
Ein funktionierendes Beispiel für diese Anwendung finden Sie hier .
Sie können diese jsFiddle verwenden als Ausgangspunkt für Ihre eigenen Glut-Apps verwenden
Nächste Schritte...
- Lesen Sie die Ember Guides
- Vielleicht den Peepcode kaufen Screencast
- Stellen Sie hier Fragen zum Stapelüberlauf oder im Glut-IRC
Als Referenz meine ursprüngliche Antwort:
Meine Frage richtet sich an jeden Ember.js-Experten und sicherlich an die jeweiligen Autoren des Tutorials: Wann sollte ich Entwurfsmuster aus einem Tutorial und wann aus dem anderen verwenden?
Diese beiden Tutorials stellen Best Practices zum Zeitpunkt ihrer Erstellung dar. Sicher gibt es etwas, das von jedem gelernt werden kann. Beide sind leider dazu verdammt, veraltet zu sein, weil ember.js sich sehr schnell bewegt. Von den beiden ist Trek's weitaus aktueller.
Welche Komponenten von jedem sind persönliche Vorlieben und welche Komponenten werden sich als wesentlich erweisen, wenn meine App reift? Wenn Sie eine neue Glutanwendung entwickeln, würde ich nicht empfehlen, dem Code Lab-Ansatz zu folgen. Es ist einfach zu veraltet, um nützlich zu sein.
Im Design von Code Lab scheint Ember näher an der Existenz innerhalb der Anwendung zu sein (obwohl es 100% seines benutzerdefinierten JS ist), während Treks Anwendung eher in Ember zu leben scheint.
Ihr Kommentar ist knallhart. CodeLab nutzt die Kernglutkomponenten und greift aus globaler Sicht darauf zu. Als es geschrieben wurde (vor 9 Monaten), war dies ziemlich üblich, aber heute ist die bewährte Methode zum Schreiben von Glutanwendungen viel näher an dem, was Trek tat.
Trotzdem ist sogar Treks Tutorial veraltet. Komponenten, die benötigt wurden ApplicationViewund ApplicationControllerjetzt vom Framework selbst generiert werden.
Die mit Abstand aktuellste Ressource sind die unter http://emberjs.com/guides/ veröffentlichten Leitfäden.
Sie wurden in den letzten Wochen von Grund auf neu geschrieben und spiegeln die neueste (vorab veröffentlichte) Version von Ember wider.
Ich würde mir auch das Wip-Projekt von Trek hier ansehen: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
EDIT :
@ sly7_7: Ich würde auch ein anderes Beispiel geben, indem ich Glutdaten https://github.com/dgeb/ember_data_example verwende