So erstellen Sie eine Ember.js-Anwendung

Es war schwierig, mit der Entwicklung von Ember JS Schritt zu halten, als es sich der Version 1.0.0 näherte (und diese erreichte!). Tutorials und Dokumentationen sind gekommen und gegangen, was zu großer Verwirrung über Best Practices und die Absicht der ursprünglichen Entwickler geführt hat.

Meine Frage ist genau das: Was sind die Best Practices für Ember JS? Gibt es aktualisierte Tutorials oder Arbeitsproben, die zeigen, wie Ember JS verwendet werden soll? Codebeispiele wären toll!

Vielen Dank an alle, besonders an die Entwickler von Ember JS!

Es gibt ein wichtiges Projekt, das sowohl neue als auch erfahrene Ember.js-Entwickler nutzen sollten:

Ember-CLI

Die Befehlszeile erfordert zwar ein gewisses Maß an Komfort, Sie können jedoch in Sekundenschnelle ein modernes Ember-Projekt mit von der Community empfohlenen Best Practices erstellen.

Es ist zwar vorteilhaft, ein Ember.js-Projekt auf die harte Tour wie in Mike Grassottis Antwort einzurichten, aber Sie sollten dies nicht für Produktionscode tun. Besonders wenn wir ein so mächtiges und einfach zu bedienendes Projekt haben Ember-CLI, das uns gerne den von Yehuda genehmigten glücklichen Weg zeigt .

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

Es gibt einen 30-minütigen neuen Screencast von @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY

Ich würde die Verwendung von Yeoman sehr empfehlen und den dazugehörigen Glutgenerator nur . Nach dem Auspacken erhalten Sie alle Tools, die Sie zum Entwickeln, Testen und Vorbereiten einer App für die Produktion benötigen. Als zusätzlichen Bonus können Sie Ihre Ansichtsvorlagen in mehrere Dateien aufteilen und mit einer intelligenten Verzeichnisstruktur beginnen, mit der Sie eine wartbare Codebasis erstellen können.

Ich habe ein Tutorial geschrieben, wie man es in ungefähr 5 Minuten zum Laufen bringt. Installieren Sie einfach node.js und folgen Sie hier

Der Screencast Fire Up Ember - Peepcode ist eine Uhr wert.

Lesen Sie auch dieses kostenlose Tutorial mit dem Titel Let's Learn Ember von Tuts + Premium. Es ist kostenlos, weil es aus ihrer free coursesSerie stammt. Dieser Kurs, wie die Tuts es nennen, ist in vierzehn leicht zu verfolgende Kapitel unterteilt.

Ich hoffe das hilft.

Grüße,

Ich bevorzuge den Ansatz der Holzkohle. Es gibt Ihnen eine Menge Dinge aus der Box, einschließlich:

• Eine schöne Ordnerarchitektur mit einem "Modul" -Ansatz.
• kastrieren
• Live-Reload
• minimieren
• verunstalten
• jshint

und mehr.

und es ist super einfach einzurichten, einfach ausführen yo charcoal, um eine App zu erstellen und dann yo charcoal:module myModuleein neues Modul hinzuzufügen.

Weitere Infos hier: https://github.com/thomasboyt/charcoal

Ich habe gerade ein Starter Kit erstellt, wenn Sie das neueste EmberJS mit Ember-Data und Emblem Template Engine verwenden möchten. Alles in Middleman verpackt, damit Sie mit CoffeeScript entwickeln können. Alles auf meinem GitHub: http://goo.gl/a7kz6y

Obwohl Flame auf Ember.js veraltet ist, ist es immer noch ein gutes Tutorial für jemanden, der sich zum ersten Mal mit Ember befasst.

Ich habe angefangen, eine Reihe von Videos zu erstellen, die vor Ember beginnen und darauf abzielen, Ember in ernsthaften Anwendungsfällen für reale Dinge im Zorn einzusetzen.

Wenn Sie daran interessiert sind, dass dies das Licht der Welt erblickt (ich bin mehr als glücklich, es irgendwann öffentlich zu machen, wenn Interesse besteht), sollten Sie auf jeden Fall zu dem Beitrag gehen, den ich gemacht habe, und auf "Gefällt mir" klicken (oder einfach hier kommentieren, Ich vermute):

http://discuss.emberjs.com/t/making-ember-easier-to-approach-aka-crazy-screencasts-videos-that-will-stick-in-your-mind-for-learning-ember/5284

Ich bin sehr daran interessiert, dass die Community gedeiht, aber auch, dass die Leute lernen, wie man auf einfache Weise Standardwebsites erstellt.