Jak zaprojektować aplikację Ember.js.

Trudno było nadążyć za ewolucją Ember JS w miarę zbliżania się (i osiągania!) Wersji 1.0.0. Samouczki i dokumentacja pojawiały się i znikały, prowadząc do wielu nieporozumień dotyczących najlepszych praktyk i intencji pierwotnych programistów.

Moje pytanie jest dokładnie takie: jakie są najlepsze praktyki dla Ember JS? Czy są jakieś zaktualizowane samouczki lub próbki robocze pokazujące, jak ma być używany Ember JS? Próbki kodu byłyby świetne!

Dziękujemy wszystkim, a zwłaszcza programistom Ember JS!

Istnieje ważny projekt, z którego powinni skorzystać zarówno nowi, jak i doświadczeni programiści Ember.js:

Ember-CLI

Chociaż wymaga to pewnego poziomu komfortu w wierszu poleceń, możesz wygenerować nowoczesny projekt Ember z zalecanymi przez społeczność najlepszymi praktykami w ciągu kilku sekund.

Chociaż skonfigurowanie projektu Ember.js w trudny sposób jest korzystne, jak w odpowiedzi Mike'a Grassottiego, nie powinieneś tego robić w przypadku kodu produkcyjnego. Zwłaszcza, gdy mamy tak potężny i łatwy w użyciu projekt, jak Ember-CLIpokazanie nam szczęśliwej ścieżki zaakceptowanej przez Yehudę .

Mike Grassotti's Minimum Viable Ember.js QuickStart Guide

Ten przewodnik szybkiego startu powinien doprowadzić Cię od zera do nieco więcej niż zera w ciągu kilku minut. Kiedy skończysz, powinieneś czuć się pewnie, że ember.js faktycznie działa i miejmy nadzieję, że będziesz na tyle zainteresowany, aby dowiedzieć się więcej.

OSTRZEŻENIE: Nie próbuj tylko tego przewodnika, a potem pomyśl, że żar jest do niczego, ponieważ „mógłbym lepiej napisać ten przewodnik szybkiego startu w jQuery lub Fortranie” lub cokolwiek. Nie próbuję ci sprzedawać na żar ani nic, ten przewodnik to niewiele więcej niż witaj świat.

Krok 0 - Wypróbuj jsFiddle

ten jsFiddle zawiera cały kod z tej odpowiedzi

Krok 1 - Dołącz ember.js i inne wymagane biblioteki

Ember.js wymaga zarówno jQuery, jak i Handlebars. Upewnij się, że te biblioteki zostały załadowane przed 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>

Krok 2 - Opisz interfejs użytkownika aplikacji, korzystając z co najmniej jednego szablonu kierownic

Domyślnie ember zastąpi treść strony HTML przy użyciu zawartości jednego lub więcej szablonów pasków obsługi. Któregoś dnia szablony te będą znajdować się w osobnych plikach .hbs zebranych przez koła zębate lub grunt.js. Na razie będziemy przechowywać wszystko w jednym pliku i używać tagów script.

Najpierw dodajmy jeden applicationszablon:

<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>

Krok 3 - Zainicjuj aplikację Ember

Po prostu dodaj kolejny blok skryptu, App = Ember.Application.create({});aby załadować plik ember.js i zainicjować aplikację.

<script type='text/javascript'>
  App = Ember.Application.create({});
</script>

To wszystko, czego potrzebujesz, aby stworzyć podstawową aplikację żarową, ale nie jest to zbyt interesujące.

Krok 4: Dodaj kontroler

Ember ocenia każdy szablon kierownicy w kontekście kontrolera. Więc applicationszablon ma dopasowanie ApplicationController. Ember tworzy automatycznie, jeśli go nie zdefiniujesz, ale tutaj dostosujmy go, aby dodać właściwość wiadomości.

<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
    message: 'This is the application template' 
});
</script>

Krok 5: Zdefiniuj trasy + więcej kontrolerów i szablonów

Router Ember ułatwia łączenie szablonów / kontrolerów w aplikację.

<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>

Aby to zadziałało, modyfikujemy nasz szablon aplikacji, dodając {{outlet}}pomocnika. Router Ember wyrenderuje odpowiedni szablon do gniazdka w zależności od trasy użytkownika. Użyjemy również {{linkTo}}pomocnika, aby dodać linki nawigacyjne.

    <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>

Gotowe!

Działający przykład tej aplikacji jest dostępny tutaj .

Możesz użyć tego jsFiddle jako punktu wyjścia dla własnych aplikacji żarowych

Następne kroki...

• Przeczytaj przewodniki Ember
• Może kup screencast z Peepcode
• Tutaj możesz zadawać pytania na temat przepełnienia stosu lub w żarowym IRC

Dla porównania moja oryginalna odpowiedź:

Moje pytanie jest skierowane do każdego eksperta Ember.js, a na pewno do autorów odpowiednich tutoriali: Kiedy powinienem używać wzorców projektowych z jednego samouczka, a kiedy z drugiego?

Te dwa samouczki przedstawiają najlepsze praktyki w czasie ich pisania. Na pewno jest coś, czego można się od każdego nauczyć, oba są niestety skazane na dezaktualizację, ponieważ ember.js rozwija się bardzo szybko. Z tych dwóch Trek jest znacznie bardziej aktualny.

Jakie składniki każdego z nich są osobistymi preferencjami, a które okażą się istotne w miarę dojrzewania mojej aplikacji? Jeśli tworzysz nową aplikację Ember, nie polecam stosowania podejścia Code Lab. Jest po prostu zbyt nieaktualny, aby był przydatny.

W projekcie Code Lab Ember wydaje się być bliżej istniejącego w aplikacji (mimo że jest to 100% jego niestandardowego JS), podczas gdy aplikacja Treka wydaje się żyć bardziej w Ember.

Twój komentarz jest bang-on. CodeLab wykorzystuje podstawowe komponenty Ember i uzyskuje do nich dostęp z globalnego zasięgu. Kiedy to zostało napisane (9 miesięcy temu), było to dość powszechne, ale dzisiaj najlepsza praktyka pisania aplikacji żarowych jest znacznie bliższa temu, co robił Trek.

To powiedziawszy, nawet samouczek Treka staje się nieaktualny. Komponenty, które były wymagane ApplicationViewi ApplicationControllersą teraz generowane przez samą platformę.

Zdecydowanie najbardziej aktualnym zasobem jest zestaw przewodników opublikowanych pod adresem http://emberjs.com/guides/ - zostały one napisane od podstaw w ciągu ostatnich kilku tygodni i odzwierciedlają najnowszą (przedpremierową) wersję programu ember.

Chciałbym również sprawdzić projekt czyszczenia trekkingu tutaj: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-convenieiments

EDYCJA :

@ sly7_7: Podałbym również inny przykład, używając danych ember https://github.com/dgeb/ember_data_example

Jest 30 minut świeżego screencasta autorstwa @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY

Gorąco polecam używanie Yeoman i towarzyszącego mu generatora żaru. Po wyjęciu z pudełka otrzymujesz wszystkie narzędzia potrzebne do tworzenia, testowania i przygotowywania aplikacji do produkcji. Jako dodatkowy bonus, będziesz mógł podzielić szablony widoków na wiele plików i zacząć od inteligentnej struktury katalogów, która ułatwi Ci tworzenie łatwej do utrzymania bazy kodu.

Napisałem samouczek, jak go uruchomić i uruchomić w około 5 minut. Po prostu zainstaluj node.js i postępuj zgodnie z instrukcjami tutaj

Warto obejrzeć zrzut ekranu Fire Up Ember - Peepcode .

Zapoznaj się również z tym bezpłatnym samouczkiem zatytułowanym Let's Learn Ember from Tuts + Premium. Jest za darmo, ponieważ pochodzi z ich free coursesserii. Ten kurs, jak nazywają go ludzie z Tuts, jest podzielony na czternaście łatwych do zrozumienia rozdziałów.

Mam nadzieję, że to pomoże.

Pozdrowienia,

Wolę podejście kelnera z węgla drzewnego. Daje mnóstwo rzeczy po wyjęciu z pudełka, w tym:

• ładna architektura folderów wykorzystująca podejście „modułowe”.
• nijaki
• przeładuj na żywo
• minify
• zeszpecić
• jshint

i więcej.

i jest bardzo łatwy w konfiguracji, po prostu uruchom, yo charcoalaby utworzyć aplikację, a następnie yo charcoal:module myModuledodać nowy moduł.

więcej informacji tutaj: https://github.com/thomasboyt/charcoal

Właśnie stworzyłem Starter Kit, jeśli chcesz używać najnowszego EmberJS z Ember-Data, z silnikiem szablonów Emblem. Wszystko zapakowane w Middleman, więc możesz programować za pomocą CoffeeScript. Wszystko na moim GitHubie: http://goo.gl/a7kz6y

Chociaż przestarzały Flame na Ember.js jest nadal dobrym samouczkiem dla kogoś, kto po raz pierwszy patrzy na żar.

Zacząłem tworzyć serię filmów, które zaczęły się przed Ember i zmierzały do ​​używania Embera w gniewie w poważnych przypadkach użycia w rzeczywistych sytuacjach.

Jeśli chcesz zobaczyć, jak to ujrzy światło dzienne (jestem bardziej niż szczęśliwy, mogąc w końcu upublicznić, jeśli jest zainteresowanie), zdecydowanie powinieneś przejść do wpisu, który napisałem i kliknąć „Lubię” (lub po prostu skomentować tutaj, Zgaduję):

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

Bardzo mi zależy na tym, aby pomóc społeczności w rozwoju, ale także pomóc ludziom nauczyć się, jak w łatwy sposób tworzyć standardowe witryny internetowe.