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